Цикл по JSON и отображение каждого элемента массива в таблице HTML

Question

Итак, я просто собирался получить данные JSON и отобразить их в HTML, когда столкнулся с необходимостью циклически просматривать элементы и отображать все ключи и значения.Моя цель - отобразить все 50 элементов в массиве JSON и их информацию в виде таблицы.Но что бы я ни пытался сделать, единственный выход - это номер 50. Последний элемент в массиве.

Вот мой JSON:

{
"_embedded": {
    "enheter": [
        {
            "organisasjonsnummer": "995742594",
            "navn": "0-TAXI , KHAN TAIMUR",
            "organisasjonsform": {
                "kode": "ENK",
                "beskrivelse": "Enkeltpersonforetak",
                "_links": {
                    "self": {
                        "href": "https://data.brreg.no/enhetsregisteret/api/organisasjonsformer/ENK"
                    }
                }
            },
            "registreringsdatoEnhetsregisteret": "2010-07-15",
            "registrertIMvaregisteret": true,
            "naeringskode1": {
                "beskrivelse": "Drosjebiltransport",
                "kode": "49.320"
            },
            "antallAnsatte": 0,
            "forretningsadresse": {
                "land": "Norge",
                "landkode": "NO",
                "postnummer": "1473",
                "poststed": "LØRENSKOG",
                "adresse": [
                    "Kulturhusgata 1"
                ],
                "kommune": "LØRENSKOG",
                "kommunenummer": "0230"
            },
            "institusjonellSektorkode": {
                "kode": "8200",
                "beskrivelse": "Personlig næringsdrivende"
            },
            "registrertIForetaksregisteret": false,
            "registrertIStiftelsesregisteret": false,
            "registrertIFrivillighetsregisteret": false,
            "konkurs": false,
            "underAvvikling": false,
            "underTvangsavviklingEllerTvangsopplosning": false,
            "maalform": "Bokmål",
            "_links": {
                "self": {
                    "href": "https://data.brreg.no/enhetsregisteret/api/enheter/995742594"
                }
            }
        },//This is just the one item, the list goes on all the way up to 50.'

Это код для извлечения данных:

      jQuery.ajax({
    url: 'https://data.brreg.no/enhetsregisteret/api/enheter?page=0&size=50&naeringskode=49.3,49.4,49.5&sort=navn.norwegian,asc',
    type: 'GET',
    data: {},
    dataType: 'json',
    success: (response) => {

      var listenhet = (response);
      var enhetArray = listenhet._embedded.enheter;

      for (var i = 0; i < enhetArray.length; i++) {
        console.log(enhetArray[i].navn);

        //Creating table
        var table ="<tr><td>"+enhetArray[i].forretningsadresse.kommune+"</td><td>"+enhetArray[i].navn+"</td><td>"+enhetArray[i].registrertIMvaregisteret+"</td><td>"+enhetArray[i].registreringsdatoEnhetsregisteret+"</td><td>"+enhetArray[i].naeringskode1.beskrivelse+"</td></tr>";


        //Showing the table inside tbody
        document.getElementById("myTB").innerHTML = table;   
      }
      console.log(response);
    },
    error: (response) => {
      console.log(response);
    } 
  })

Вот таблица

<table class="table">
            <thead>
                <tr>
                  <th scope="col">Sted</th>
                  <th scope="col">Firmanavn</th>
                  <th scope="col">MVA Registrert</th>
                  <th scope="col">Reg Dato</th>
                  <th scope="col">Beskrivelse</th>
                </tr>
              </thead>
              <tbody id="myTB">
            </tbody>
          </table>

Это мой вывод:

Это моя консоль:

Итак, как вы видите, консоль регистрирует все 50 элементов.Пока в моей таблице отображается только последний элемент в массиве.Как я могу отобразить все 50 элементов в таблице, чтобы она стала 50 строками таблицы с необходимой мне информацией о каждом элементе?

Answer 1

Вы создаете эту переменную:

var table ="<tr><td>"+enhetArray[i].forretningsadresse.kommune+"</td><td>"+enhetArray[i].navn+"</td><td>"+enhetArray[i].registrertIMvaregisteret+"</td><td>"+enhetArray[i].registreringsdatoEnhetsregisteret+"</td><td>"+enhetArray[i].naeringskode1.beskrivelse+"</td></tr>";

И добавляете ее к innerHTML со значением #myTB

document.getElementById("myTB").innerHTML = table;   

Но это означает, что таблица имеет новое значение на каждой итерациипетля.Таким образом, в последней итерации, какое бы значение ей ни присваивалось, это отображается в таблице.

Вам необходимо сохранить значение в переменной вне цикла, например:

var total = ""; // Let this contain all the text
for (var i = 0; i < enhetArray.length; i++) {
    console.log(enhetArray[i].navn);

    //Creating table
    var table ="<tr><td>"+enhetArray[i].forretningsadresse.kommune+"</td><td>"+enhetArray[i].navn+"</td><td>"+enhetArray[i].registrertIMvaregisteret+"</td><td>"+enhetArray[i].registreringsdatoEnhetsregisteret+"</td><td>"+enhetArray[i].naeringskode1.beskrivelse+"</td></tr>";

    // Store the value in 'total'
    total+= table;  
}


// Set innerHTML to the combined value
document.getElementById("myTB").innerHTML = total;  

Answer 2

Вы создаете новую переменную 'var table' на каждой итерации, которая приводит к удалению последних содержащихся данных из табличной переменной и инициализации с последними данными.Так что данные из последней итерации существуют только в табличной переменной.Попробуйте создать глобальную переменную вне цикла

var table = "";

            for (var i = 0; i < enhetArray.length; i++) {
                console.log(enhetArray[i].navn);

                //Creating table
                var rowData ="<tr><td>"+enhetArray[i].forretningsadresse.kommune+"</td><td>"+enhetArray[i].navn+"</td><td>"+enhetArray[i].registrertIMvaregisteret+"</td><td>"+enhetArray[i].registreringsdatoEnhetsregisteret+"</td><td>"+enhetArray[i].naeringskode1.beskrivelse+"</td></tr>";

                // Store the value in 'table'
                table+= rowData;  
            }

и назначьте переменную table для myTB с внешней стороны цикла.

document.getElementById("myTB").innerHTML = table; 

Answer 3

просто замените

    document.getElementById("myTB").innerHTML = table;   

на

    document.getElementById("myTB").innerHTML += table;