Javascript 将多个JSON数组解析为html_Javascript_Arrays_Json_Rest_Xmlhttprequest

Javascript 将多个JSON数组解析为html

javascript arrays json rest

Javascript 将多个JSON数组解析为html,javascript,arrays,json,rest,xmlhttprequest,Javascript,Arrays,Json,Rest,Xmlhttprequest,我正在尝试解析此api：我可以解析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

我正在尝试解析此api：我可以解析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();

var xhr=new-XMLHttpRequest（）；
xhr.open（“GET”http://www.fulek.com/VUA/SUPIT/GetCategoriesAndFoods', 
正确的）；
xhr.onload=函数（）{
如果（this.status==200）{
var menu=JSON.parse（this.responseText）；
var输出=“”；
var outputArr=''；
用于（菜单中的变量i）{
输出+=
'' + 
“”+菜单[i].Id+”'+
“”+菜单[i].Naziv+“”
用于（菜单中的变量j）{
输出端+=
'' + 
“”+菜单[j].杰洛德+”'+
“”+菜单[j].Naziv+“”+
“”+菜单[j]。Opis+”“+
“”+菜单[j].Cijena+“”+
'' +
''
}
}
document.getElementById（'menu'）.innerHTML=output；
document.getElementsByClassName（'courine'）。innerHTML=outputArr；
}
};
xhr.send（）；

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

<body>

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

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

我想从名为courine的div中的文本“Ponuda”数组内容进行解析

我认为您没有以正确的方式重复响应。请试试这个

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;

 }

if（this.status==200）{
var menu=JSON.parse（this.responseText）；
var输出=“”；
var outputArr=''；
对于（变量i=0；i'+
“”+菜单[i].Naziv+””；
var innerArray=菜单[i].Ponuda；
对于（var j=0；j'+
“”+innerArray[j].纳齐夫+”'+
“”+内部数组[j].Opis+”'+
“”+内部数组[j].Cijena+”'+
'' +
''
}
}
document.getElementById（'menu'）.innerHTML=output；
document.getElementsByClassName（'courine'）。innerHTML=outputArr；
}

请查看此代码。mybe使用repl试着理解并使其适应您的任务：

var jsonMenu=JSON.parse（“[{”Id“：1，“Naziv”：“prepriukaŠEFA KUHINJE”，“Ponuda”：[{”JeloId“：3，“Naziv“：“Patka szechuan”，“Opis:”hrskava Patka，povr loidć，ljuto”，“Cijena”：56}，{”JeloId“：10，“Naziv:”juneta i brokula”，“Opis:”朱内塔，布罗kula，Mrka，luk，ljuto”，“Cijena:”47}，“，”je:11，“Naziv jsetina”，“Pilima:”Kim:”“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 Echuan”，“Opis”Skhrava”，“Pojue”：“Patka”，56}杰洛德：15，“纳齐夫”：“帕特卡·雅乌克斯”，“奥皮斯”：“赫斯卡瓦·帕特卡，乌马克·奥德什尼贾卡”，“齐耶纳”：51}，{“Id”：2，“纳齐夫”：“托普拉·普雷杰拉”，“波努达”：[{“杰洛德”：4，“纳齐夫”：“罗拉达的中间思想”，“奥皮斯”：“姆列维纳朱内蒂纳，波夫雷奇”，“齐耶纳”：14}，{“杰洛德”：16，“纳齐夫”：“罗拉波夫雷奇”（2公分），“奥皮斯·普雷达”，17“{罗拉达的《中观》（第2章），“奥皮斯”：“姆列维娜·朱内蒂纳，波夫雷奇”，“西耶纳”：14}，{“杰洛德”：18，“纳齐夫”：“杰洛德·贾斯托加”，“奥皮斯”：“杰洛德·贾斯托加”，“奥皮斯”：“斯莱特科·基塞利·乌马克”，“西耶纳”：16}，{“Id”：3，“纳齐夫”：“杰洛德·朱赫”，“波努达”：[{“杰洛德”：19，“纳齐夫”：“杰洛德·基塞洛·朱塔·朱哈”，“奥皮斯”：“拉多”，“奥皮斯”：“杰洛德”15}，{“杰洛德·朱洛德·朱利瓦”，“朱利亚德·朱伊夫”：奥皮斯：“布拉戈”、“齐耶纳”：17}}，{“Id”：4，“纳齐夫”：“JELA SA REZANCIMA”、“Ponuda”：[{“JeloId”：21，“Naziv”：“Rezanci s povrćem”，“奥皮斯”：“povrće，jaja”，“Cijena”：34}，{“JeloId”：22，“Naziv”：“Rezanci s Piletonim i povrćem”，“Opis”：“Piletina，povrće”，“Cijena”：35}，{“JeloId”：23，“Naziv”：“Rezanci 3 Vrstetina”，“PovretinćInjetina，Piletina”“西耶纳”：38}，{“杰洛德”：24，“纳齐夫”：“雷赞奇四川”，“奥皮斯”：“皮列提娜，波夫雷奇，卢朱托”，“西耶纳”：46}，{“杰洛德”：25，“纳齐夫”：“雷赞奇贡宝”，“奥皮斯”：“皮列提娜，波夫雷奇，基基里基，卢朱托”，“西耶纳”：47}，{“杰洛德”：26，“纳齐夫”：“雷赞奇皮列提娜，班布斯·格尔吉夫”，“奥皮列提娜”：“皮列提娜，班布斯·格尔吉夫”，“奥皮提娜，班布斯，克·希塔克·格尔吉夫”，“杰洛德”，50}，{“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的Piletoni u slatko kiselom umaku”，“Opis”：“piletina u kineskom tijestu，kiselim”，“JeloId”，48}，”纳齐夫“：“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čšnjaka”，“Cijena”：46}，{“JeloId”：50，“Naziv:“Rezanci s patkom kiselom umaku”，“Opis:“Blago”，“Cijena:”56}，“，“JeloId”：Rezanci s Piletonim i indijskim orašicićima，“Opis”：“Velika porcija”，“Cijena”：49}，{“Id”：5，“Naziv”：“JELA s Piletonim”，“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ž”，“Opis”，“piletina”（piletina）piletina“，”西耶纳：41}，{“杰洛德”：32，“纳齐夫”：“Piletina Gonbao+riža”，“Opis”：“Piletina，povrće，kikiriki（ljuto）”，“西耶纳”：42}，{“杰洛德”：33，“纳齐夫”：“Piletina s bambusom i gljivama+riža”，“Opis”：“Piletina，bambus，Kinske shiitake gljive”，“西耶纳”：45}，{“杰洛德”：52，“纳齐夫”：“Piletina s bambusom i gljivama+Opis”：“Piletina”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 SA povrĆĆEM”，“Ponuda”；“Ponuda”[{“JeloId”：34，“Naziv”：“Veggie wok+riža”，“Opis”：“povrć-Wo”和“Nazid”：7}JELA SA SVINJETINOM，“Ponuda”
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;