javascript - 循环遍历 JSON 并在 HTML 表格中显示每个数组项

Question

因此，当我需要循环遍历项目并显示每个键和值时，我正准备轻松获取 JSON 数据并以 HTML 形式显示它。我的目标是在表格中显示 JSON 数组中的所有 50 个项目及其信息。但无论我尝试做什么，唯一的输出都是 nr 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” 这会导致从表变量中删除最后包含的数据并使用最新数据进行初始化。这样最后一次迭代的数据只存在于表变量中。 尝试在循环外部创建全局变量

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;