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

最简单的方法是遍历对象键并使用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>

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>

在代码中，您有一个对象，可在其中使用属性访问值。但是您将其视为一个数组，其中索引可以访问项目。这种根本的错误假设会使您的代码失败。

从JSON对象打印选定的属性

3 个答案: