时间戳

首页 > 解决方案 > 打印选定的属性表单 json 对象

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

问题描述

我将一个 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"
},}

标签： javascriptjquery

解决方案

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

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>

推荐阅读