Question

因此，当我遇到需要遍历项目并显示每个键和值的需求时，我只是想轻松地获取JSON数据并以HTML显示它。我的目标是在JSON数组中显示所有50个项目及其信息。但是，无论我尝试做什么，唯一的输出是nr50。数组中的最后一项。

这是我的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

只需替换

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

与

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

Answer 2

您正在创建此变量：

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

并将其添加到#myTB的innerHTML中

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 3

您将在每次迭代中创建一个新的变量“ var table” 这导致从表变量中删除最后包含的数据，并使用最新数据进行初始化。因此，上次迭代的数据仅存在于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;

遍历JSON并在HTML表中显示每个数组项

3 个答案: