打印选定的属性表单json对象

Question

我将一个json文件加载到一个变量中。现在，我需要打印该变量(json对象)中的一些属性。我可以单独访问它们，但不能激怒它们并保存它们。

var companyList = (function() {
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "/company_list.json",
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;
})();
console.log(companyList.comp001.title); // This works 

let htmlString = "";

for (i = 0; i <480; i++) {
htmlString += "<p>" + companyList.comp[i].title + " </P>";
};     // I could not able to save them in htmlstring

我的json文件看起来像这样。我需要打印每个公司的名称

{
"comp001": {
  "title": "AachenMünchener",
  "img": "/company-logos/logos1x/de001.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de001.png?ver=gz30i 1x, /company-logos/logos2x/de001.png?ver=gz30i 2x, /company-logos/logos3x/de001.png?ver=gz30i 3x"
},
"comp002": {
  "title": "ADAC",
  "img": "/company-logos/logos1x/de002.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de002.png?ver=gz30i 1x, /company-logos/logos2x/de002.png?ver=gz30i 2x, /company-logos/logos3x/de002.png?ver=gz30i 3x"
},
"comp003": {
  "title": "ADLER",
  "img": "/company-logos/logos1x/de003.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de003.png?ver=gz30i 1x, /company-logos/logos2x/de003.png?ver=gz30i 2x, /company-logos/logos3x/de003.png?ver=gz30i 3x"
},
"comp004": {
  "title": "ADVOCARD",
  "img": "/company-logos/logos1x/de004.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de004.png?ver=gz30i 1x, /company-logos/logos2x/de004.png?ver=gz30i 2x, /company-logos/logos3x/de004.png?ver=gz30i 3x"
},}

Answer 1

最简单的方法是遍历对象键，并使用Object.keys(companyList)获取每个对象的title值

​

var companyList = {
"comp001": {
  "title": "AachenMünchener",
  "img": "/company-logos/logos1x/de001.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de001.png?ver=gz30i 1x, /company-logos/logos2x/de001.png?ver=gz30i 2x, /company-logos/logos3x/de001.png?ver=gz30i 3x"
},
"comp002": {
  "title": "ADAC",
  "img": "/company-logos/logos1x/de002.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de002.png?ver=gz30i 1x, /company-logos/logos2x/de002.png?ver=gz30i 2x, /company-logos/logos3x/de002.png?ver=gz30i 3x"
},
"comp003": {
  "title": "ADLER",
  "img": "/company-logos/logos1x/de003.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de003.png?ver=gz30i 1x, /company-logos/logos2x/de003.png?ver=gz30i 2x, /company-logos/logos3x/de003.png?ver=gz30i 3x"
},
"comp004": {
  "title": "ADVOCARD",
  "img": "/company-logos/logos1x/de004.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de004.png?ver=gz30i 1x, /company-logos/logos2x/de004.png?ver=gz30i 2x, /company-logos/logos3x/de004.png?ver=gz30i 3x"
}};

let htmlString = "";

Object.keys(companyList).forEach(function(key){
  htmlString += "<p>" + companyList[key].title; + " </P>";
});
document.getElementById('container').innerHTML = htmlString;

<div id='container'></div>

​

Answer 2

你的问题是：

for (i = 0; i <480; i++) {
    htmlString += "<p>" + companyList.comp[i].title + " </P>";
}

将搜索不存在的companyList.comp[i]，因为companyList不包含任何数组comp，所以comp[i]是不可能的。你可以做到

companyList["comp" + i].title

才能正常工作。

但这还不是全部，你的for只适用于480公司，如果你有更少的htmlString，你会得到很多未定义的东西，如果你有更多，你会失去一些。

​

companyList = {
"comp001": {
  "title": "AachenMünchener",
  "img": "/company-logos/logos1x/de001.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de001.png?ver=gz30i 1x, /company-logos/logos2x/de001.png?ver=gz30i 2x, /company-logos/logos3x/de001.png?ver=gz30i 3x"
},
"comp002": {
  "title": "ADAC",
  "img": "/company-logos/logos1x/de002.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de002.png?ver=gz30i 1x, /company-logos/logos2x/de002.png?ver=gz30i 2x, /company-logos/logos3x/de002.png?ver=gz30i 3x"
},
"comp003": {
  "title": "ADLER",
  "img": "/company-logos/logos1x/de003.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de003.png?ver=gz30i 1x, /company-logos/logos2x/de003.png?ver=gz30i 2x, /company-logos/logos3x/de003.png?ver=gz30i 3x"
},
"comp004": {
  "title": "ADVOCARD",
  "img": "/company-logos/logos1x/de004.png?ver=gz30i",
  "imgsrcset": "/company-logos/logos1x/de004.png?ver=gz30i 1x, /company-logos/logos2x/de004.png?ver=gz30i 2x, /company-logos/logos3x/de004.png?ver=gz30i 3x"
},}

let htmlString = ""
for (let company in companyList) {
  htmlString += "<p>" + companyList[company].title + "</p>";
}; 

console.log(htmlString)

​

Answer 3

获取它们的密钥，然后缩减对象以构建包含所有标题的最终html。

​

var companyList = {
  "comp001": {
    "title": "AachenMünchener",
    "img": "/company-logos/logos1x/de001.png?ver=gz30i",
    "imgsrcset": "/company-logos/logos1x/de001.png?ver=gz30i 1x, /company-logos/logos2x/de001.png?ver=gz30i 2x, /company-logos/logos3x/de001.png?ver=gz30i 3x"
  },
  "comp002": {
    "title": "ADAC",
    "img": "/company-logos/logos1x/de002.png?ver=gz30i",
    "imgsrcset": "/company-logos/logos1x/de002.png?ver=gz30i 1x, /company-logos/logos2x/de002.png?ver=gz30i 2x, /company-logos/logos3x/de002.png?ver=gz30i 3x"
  },
  "comp003": {
    "title": "ADLER",
    "img": "/company-logos/logos1x/de003.png?ver=gz30i",
    "imgsrcset": "/company-logos/logos1x/de003.png?ver=gz30i 1x, /company-logos/logos2x/de003.png?ver=gz30i 2x, /company-logos/logos3x/de003.png?ver=gz30i 3x"
  },
  "comp004": {
    "title": "ADVOCARD",
    "img": "/company-logos/logos1x/de004.png?ver=gz30i",
    "imgsrcset": "/company-logos/logos1x/de004.png?ver=gz30i 1x, /company-logos/logos2x/de004.png?ver=gz30i 2x, /company-logos/logos3x/de004.png?ver=gz30i 3x"
  }
};


const htmlString = Object.keys(companyList).reduce(function(acc, key) {
  return acc + "<p>" + companyList[key].title + " </p>";
}, "");
document.getElementById('container').innerHTML = htmlString;

<div id="container"></div>

​

在您的代码中，您有一个对象，其中的值是使用属性访问的。但您将其视为一个数组，其中的项通过索引进行访问。这个根本错误的假设让你的代码失败了。