将多个 JSON 数组解析为 html答案

【问题标题】：Parsing multiple JSON arrays into html将多个 JSON 数组解析为 html
【发布时间】：2019-11-17 07:40:51
【问题描述】：

我正在尝试解析这个 api:http://www.fulek.com/VUA/SUPIT/GetCategoriesAndFoods 到 html 中，我可以解析 html 中的第一个数组，但无法获取第二个数组中的值。我的代码看起来像这样，我在第二个 for 循环的正确轨道上吗？

var xhr = new XMLHttpRequest();
xhr.open("GET", 'http://www.fulek.com/VUA/SUPIT/GetCategoriesAndFoods', 
true);
xhr.onload = function() {
if  (this.status == 200) {
    var menu = JSON.parse(this.responseText);
    var output = '';
    var outputArr = '';
    for(var i in menu) {
        output += 
        '<div id="menu">' + 
        '<p>' + menu[i].Id + '</p>' +
        '<p>' + menu[i].Naziv + '</p>'
        for(var j in menu) {
            outputArr +=
        '<div class="cuisine">' + 
        '<p>' + menu[j].JeloId + '</p>' +
        '<p>' + menu[j].Naziv + '</p>' +
        '<p>' + menu[j].Opis + '</p>' +  
        '<p>' + menu[j].Cijena + '</p>' +  
        '</div>' +
        '</div>'
        }
    }
    document.getElementById('menu').innerHTML = output;
    document.getElementsByClassName('cuisine').innerHTML = outputArr;

 }
};

xhr.send();

我正在尝试将其显示为 div 内的 div。这是我的html页面：

<body>

    <div id="menu">
        <div class="cuisine">

        </div>
    </div>
</body>

我想从名为美食的 div 中的文本“Ponuda”数组内容中解析

【问题讨论】：

你解析过json吗？看起来它的格式不是很好。当我在jsonformatter.org 上测试它时，它给出了一个错误： Parse error on line 1: ... brokula,carrots, "JeloId": 11, "Name": -------------- ---------^ 期待 'EOF'、'}'、':'、','、']'，得到 'undefined'
这是一项学校作业，并且已格式化。但我在第二个 for 循环 obv 中做错了

标签： javascript arrays json rest xmlhttprequest

【解决方案1】：

我建议使用 DOM 元素而不是字符串。这真是令人困惑。

ideea 是：拥有容器 div、菜单 div 列表、报价 div 列表。迭代第一个数组，然后获取对象（包括报价数组）。在容器中附加菜单 div。然后遍历第二个数组，获取对象并将美食 div 附加到菜单 div 中。

由于“加载资源失败：net::ERR_CERT_AUTHORITY_INVALID”，sn-p 不起作用，但是如果您将其复制到项目中，它会起作用。这里我提供了完整的代码和结果。

var xhr = new XMLHttpRequest();
xhr.open("GET", 'http://www.fulek.com/VUA/SUPIT/GetCategoriesAndFoods',
    true);
xhr.onload = function () {
    if (this.status == 200) {
        processResponse(this.responseText)
    }
};

xhr.send();

function processResponse(responseText) {
    var menu = JSON.parse(responseText);
    console.log(menu)

    let menuDivContainer = document.getElementById("container")

    for (var i = 0; i < menu.length; i++) {
        let menuItem = menu[i]
        // Get desired objects
        let id = menuItem.Id
        let name = menuItem.Naziv
        let offerArray = menuItem.Ponuda

        // Create menu item div with class
        let menuDivItem = document.createElement("div")
        menuDivItem.innerHTML = `${id}: ${name}`
        menuDivItem.classList.add("menu")

        // Append menuDivItem in menuDivContainer
        menuDivContainer.appendChild(menuDivItem)

        // Loop in offerArray
        for (var j = 0; j < offerArray.length; j++) {

            // Get objects from offer
            let offer = offerArray[j]
            let offerId = offer.JeloId
            let offerName = offer.Naziv
            let price = offer.Cijena
            let description = offer.Opis

            // Create div element
            let offerDiv = document.createElement("div")
            offerDiv.innerHTML = `${offerId}: ${offerName} ${price} ${description}`
            offerDiv.classList.add("cuisine")

            // Append offerDiv in menuDivItem
            menuDivItem.appendChild(offerDiv)
        }
    }
}

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

1: PREPORUKA ŠEFA KUHINJE 3: Patka szechuan 56 hrskava patka, povrće, ljuto 10: Junetina i brokula 47 Junetina, brokula, mrkva, luk, ljuto 11: Piletina s indijskim oraščićima 44 Piletina, crvena paprika, luk, ljuto 12：Piletina s curry-em 42 Piletina, luk, curry, blago 13：Patka u slatko kiselom umaku 51 Patka, paprika, riža, luk, ljuto 14: Patka szechuan 56 hrskava patka, povrće, ljuto 15: Patka Yaoux 51 Hrskava patka, umak od češnjaka 2：托普拉普雷杰拉 4: Proljetna rolada s mesom 14 mljevena junetina, povrće ...

【讨论】：

【解决方案2】：

你可以这样使用：

var menu = xhr;
var output = '';
var outputArr = '';
for(var i in menu) {
    outputArr = '';
    output += 
    '<div id="menu">' + 
    '<p>' + menu[i].Id + '</p>' +
    '<p>' + menu[i].Naziv + '</p>'

 for(var j in menu[i]["Ponuda"]){
            outputArr +=
      '<div class="cuisine">' + 
      '<p>' + menu[i]["Ponuda"][j]["JeloId"] + '</p>' + 
       '<p>' + menu[i]["Ponuda"][j]["Naziv"] + '</p>' + 
        '<p>' + menu[i]["Ponuda"][j]["Opis"] + '</p>' + 
         '<p>' + menu[i]["Ponuda"][j]["Cijena"] + '</p>' +
           '</div>' + '</div>';

  }
  output += outputArr;

}

document.getElementById('menu').innerHTML += output;

保存<div id="menu">中的所有内容

【讨论】：

【解决方案3】：

请看一下这段代码。 mybe使用repl。 - 尝试理解 - 并使其适应您的任务：

var jsonMenu = JSON.parse('[{"Id":1,"Naziv":"PREPORUKA ŠEFA KUHINJE","Ponuda":[{"JeloId":3,"Naziv":"Patka szechuan","Opis":"hrskava patka, povrće, ljuto","Cijena":56},{"JeloId":10,"Naziv":"Junetina i brokula","Opis":"Junetina, brokula, mrkva, luk, ljuto","Cijena":47},{"JeloId":11,"Naziv":"Piletina s indijskim oraščićima","Opis":"Piletina, crvena paprika, luk, ljuto","Cijena":44},{"JeloId":12,"Naziv":"Piletina s curry-em","Opis":"Piletina, luk, curry, blago","Cijena":42},{"JeloId":13,"Naziv":"Patka u slatko kiselom umaku","Opis":"Patka, paprika, riža, luk, ljuto","Cijena":51},{"JeloId":14,"Naziv":"Patka szechuan","Opis":"hrskava patka, povrće, ljuto","Cijena":56},{"JeloId":15,"Naziv":"Patka Yaoux","Opis":"Hrskava patka, umak od češnjaka","Cijena":51}]},{"Id":2,"Naziv":"TOPLA PREDJELA","Ponuda":[{"JeloId":4,"Naziv":"Proljetna rolada s mesom","Opis":"mljevena junetina, povrće","Cijena":14},{"JeloId":16,"Naziv":"Proljetna rolada s povrćem (2 kom)","Opis":"Prilog","Cijena":13},{"JeloId":17,"Naziv":"Proljetna rolada s mesom (2 kom)","Opis":"Mljevena junetina, povrće","Cijena":14},{"JeloId":18,"Naziv":"Čips od jastoga","Opis":"Čips, slatko kiseli umak","Cijena":16}]},{"Id":3,"Naziv":"KINESKE JUHE","Ponuda":[{"JeloId":19,"Naziv":"Kineska kiselo ljuta juha","Opis":"Ljuto","Cijena":15},{"JeloId":20,"Naziv":"Kineska juha od bambusa i gljiva","Opis":"Blago","Cijena":17}]},{"Id":4,"Naziv":"JELA SA REZANCIMA","Ponuda":[{"JeloId":21,"Naziv":"Rezanci s povrćem","Opis":"Povrće, jaja","Cijena":34},{"JeloId":22,"Naziv":"Rezanci s piletinom i povrćem","Opis":"Piletina, povrće","Cijena":35},{"JeloId":23,"Naziv":"Rezanci 3 vrste mesa i povrćem","Opis":"piletina, svinjetina, junetina, povrće","Cijena":38},{"JeloId":24,"Naziv":"Rezanci Szechuan","Opis":"piletina, povrće, ljuto","Cijena":46},{"JeloId":25,"Naziv":"Rezanci Gonbao","Opis":"piletina, povrće, kikiriki, ljuto","Cijena":47},{"JeloId":26,"Naziv":"Rezanci piletina, bambus i gljive","Opis":"piletina, bambus,kineske shitake gljive","Cijena":50},{"JeloId":27,"Naziv":"Rezanci 8 blaga","Opis":"piletina, svinjetina, junetina, kozice, povrće, ljuto","Cijena":51},{"JeloId":28,"Naziv":"Rezanci mongolsko meso","Opis":"junetina, poriluk, đumbir","Cijena":52},{"JeloId":29,"Naziv":"Rezanci s piletinom u slatko kiselom umaku","Opis":"piletina u kineskom tijestu, prelivena s kiselim umakom","Cijena":46},{"JeloId":48,"Naziv":"Rezanci s patkom Yaoux","Opis":"hrskava patka, umak od češnjaka","Cijena":56},{"JeloId":49,"Naziv":"Rezanci lignje Yaoux (pržene)","Opis":"pržene lignje, umak od češnjaka","Cijena":46},{"JeloId":50,"Naziv":"Rezanci s patkom u slatko kiselom umaku","Opis":"Blago","Cijena":56},{"JeloId":51,"Naziv":"Rezanci s piletinom i indijskim orašćićima","Opis":"Velika porcija","Cijena":49}]},{"Id":5,"Naziv":"JELA S PILETINOM","Ponuda":[{"JeloId":30,"Naziv":"Slatko-kisela piletina + prilog","Opis":"piletina u kineskom tijestu, prelivena s kiselim umakom","Cijena":40},{"JeloId":31,"Naziv":"Piletina Szechuan + riža","Opis":"piletina, povrće (ljuto)","Cijena":41},{"JeloId":32,"Naziv":"Piletina Gonbao + riža","Opis":"piletina, povrće, kikiriki (ljuto)","Cijena":42},{"JeloId":33,"Naziv":"Piletina s bambusom i gljivama + riža","Opis":"piletina, bambus, kineske shiitake gljive","Cijena":45},{"JeloId":52,"Naziv":"Piletina s bambusom i gljivama + riža","Opis":"piletina, bambus, kineske shiitake gljive","Cijena":45},{"JeloId":53,"Naziv":"8 blaga (3 vrste mesa) + riža","Opis":"piletina, svinjetina, junetina, kozice, povrće (ljuto)","Cijena":46}]},{"Id":6,"Naziv":"JELA SA POVRĆEM","Ponuda":[{"JeloId":34,"Naziv":"Veggie wok + riža","Opis":"povrće u wok-u","Cijena":32}]},{"Id":7,"Naziv":"JELA SA SVINJETINOM","Ponuda":[{"JeloId":35,"Naziv":"Svinjetina Szechuan + riža","Opis":"svinjetina, povrće, ljuto","Cijena":43},{"JeloId":36,"Naziv":"Gonbao svinjetina + riža","Opis":"svinjetina, povrće, kikiriki, ljuto","Cijena":44},{"JeloId":37,"Naziv":"Svinjetina s bambusom i gljivama + riža","Opis":"svinjetina, bambus, kineske shitake gljive","Cijena":47}]},{"Id":8,"Naziv":"JELA S JUNETINOM","Ponuda":[{"JeloId":38,"Naziv":"Mongolsko meso + riža","Opis":"junetina, poriluk, đumbir","Cijena":47},{"JeloId":39,"Naziv":"Junetina Szechuan + riža","Opis":"junetina, poriluk, đumbir, ljuto","Cijena":45},{"JeloId":40,"Naziv":"Gonbao junetina + riža","Opis":"junetina, poriluk, đumbir, kikiriki, ljuto","Cijena":46}]},{"Id":9,"Naziv":"SPECIJALITETI","Ponuda":[{"JeloId":41,"Naziv":"Lignje yaoux","Opis":"pržene, umak od češnjaka","Cijena":40},{"JeloId":42,"Naziv":"Kozice \u0026 Brokula","Opis":"kozice, brokula, riža","Cijena":59}]},{"Id":10,"Naziv":"PIĆA","Ponuda":[{"JeloId":43,"Naziv":"Ledeni čaj breskva","Opis":"0.5l","Cijena":13},{"JeloId":44,"Naziv":"Pago jabuka","Opis":"0.2l","Cijena":13},{"JeloId":45,"Naziv":"Coca-cola 0,5l","Opis":"Plastična boca","Cijena":13},{"JeloId":46,"Naziv":"Sprite 0,5L","Opis":"Pla","Cijena":0},{"JeloId":47,"Naziv":"Fanta 0,5L","Opis":"Plastična boca","Cijena":13}]}]');

for (let i = 0; i < jsonMenu.length; i++) {
  console.log('-----------------------------------')
  console.log(jsonMenu[i].Id);
  console.log(jsonMenu[i].Naziv);
  for (let j = 0; j < jsonMenu[i].Ponuda.length; j++) {
    console.log('-----------------------------------')
    console.log('\t JeloId:',jsonMenu[i].Ponuda[j].JeloId);
    console.log('\t Naziv:',jsonMenu[i].Ponuda[j].Naziv);
    console.log('\t Opis:',jsonMenu[i].Ponuda[j].Opis);
    console.log('\t Cijena:',jsonMenu[i].Ponuda[j].Cijena);
  }
}

【讨论】：

嘿，我实现了你的代码，但我仍然无法在第二个 div（第二个 for 循环）上呈现 html。它不返回任何错误

【解决方案4】：

我认为您没有以正确的方式迭代响应。请改用这个

if  (this.status == 200) {
    var menu = JSON.parse(this.responseText);
    var output = '';
    var outputArr = '';
    for(var i=0; i < menu.length; i++) {
        output += 
        '<div id="menu">' + 
        '<p>' + menu[i].Id + '</p>' +
        '<p>' + menu[i].Naziv + '</p>';
        var innerArray = menu[i].Ponuda;

        for(var j = 0; j < innerArray.length; j++) {
            outputArr +=
        '<div class="cuisine">' + 
        '<p>' + innerArray[j].JeloId + '</p>' +
        '<p>' + innerArray[j].Naziv + '</p>' +
        '<p>' + innerArray[j].Opis + '</p>' +  
        '<p>' + innerArray[j].Cijena + '</p>' +  
        '</div>' +
        '</div>'
        }
    }
    document.getElementById('menu').innerHTML = output;
    document.getElementsByClassName('cuisine').innerHTML = outputArr;

 }

【讨论】：

我试过你的代码，外部数组工作正常，但内部什么也没返回。您还有其他想法吗？我该如何解析所有内容？