javascript - 从 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>