Разбор нескольких массивов JSON в HTML - PullRequest
Новая
       5

Разбор нескольких массивов JSON в HTML

0 голосов
/ 07 июля 2019

Я пытаюсь разобрать этот API: http://www.fulek.com/VUA/SUPIT/GetCategoriesAndFoods в HTML, и я могу проанализировать первый массив в HTML, но не могу получить значения во втором массиве. Мой код выглядит следующим образом, и я нахожусь на правильном пути со вторым для цикла? 

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>

Я хочу проанализировать содержимое массива "Ponuda" в div, называемом kitchen. enter image description here

Ответы [ 4 ]

1 голос
/ 07 июля 2019

Я не думаю, что вы повторяете правильный ответ.Пожалуйста, попробуйте это вместо 

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;

 }
0 голосов
/ 07 июля 2019

Я рекомендую использовать элементы DOM вместо строк. Это действительно сбивает с толку.

Идея такова: есть контейнер div, список div меню, список div предложений. Итерируйте первый массив, а затем получите объекты (включая массив предложений). Добавить меню div в контейнер. Затем переберите второй массив, найдите объекты и добавьте div кухни в меню div.

Фрагмент не работает из-за «Не удалось загрузить ресурс: net :: ERR_CERT_AUTHORITY_INVALID», но если вы скопируете его в свой проект, он будет работать. Здесь я предоставил полный код с результатом. 

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: патка сычуань 56 часов хрскава патка, поврче, льюто 10: Джунетина и брокула 47 Джунетина, брокула, мрква, лук, льюто 11: Пилетина с индийским орацимом 44 Пилетина, паприка крвена, лук, лук 12: Пилетина с карри-эм 42 Пилетина, лук, карри, благо 13: Патка у слатько киселом умаку 51 Патка, паприка, рижа, лук, льюто 14: патка сычуань 56 часов хрскава патка, поврче, льюто 15: Patka Yaoux 51 Hrskava patka, umak od češnjaka 2: ТОПЛА ПРЕДЖЕЛА 4: Пролётная ролла с мезом 14 млевена хунетина, повр ...

0 голосов
/ 07 июля 2019

Вы можете использовать что-то вроде этого: 

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">

0 голосов
/ 07 июля 2019

Пожалуйста, посмотрите на этот код. 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);
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...