时间戳

首页 > 解决方案 > 将 json 加载到表中

javascript - 将 json 加载到表中

问题描述

我正在使用 ajax 将 json 数据加载到 html 表中。我想出了一种使用特定 json 结构的方法，但不确定如何使用以不同格式构造的 json 来实现。

这是我正在使用的javascript：

let myArray = [];

      $.ajax({
        method: "GET",
        url: "https://chrisjschreiner.github.io/data/conjugations.json",
        success: function (response) {
          myArray = response;
          buildTable(myArray);
          console.log(myArray);
        },
      });

      buildTable = (data) => {
        let table = document.getElementById("myTable");

        for (let i = 0; i < data.length; i++) {
          let row = `<tr>
                      <td>${data[i].personal_pronoun}</td>
                      <td>${data[i].conjugation}</td>
                    </tr>`;

          table.innerHTML += row;
        }
      };

我使用的 json 数据：

[
  {
    "personal_pronoun": "Yo",
    "conjugation": "abandono"
  },
  {
    "personal_pronoun": "Tú",
    "conjugation": "abandonas"
  },
  {
    "personal_pronoun": "Él/Ella/Usted",
    "conjugation": "abandona"
  },
  {
    "personal_pronoun": "Nosotros",
    "conjugation": "abandonamos"
  },
  {
    "personal_pronoun": "Vosotros",
    "conjugation": "abandonáis"
  },
  {
    "personal_pronoun": "Ellos/Ellas/Ustedes",
    "conjugation": "abandonan"
  }
]

的HTML：

<table
                  class="
                    table table-striped table-bordered
                    mb-sm
                    table-text-color
                  "
                >
                  <thead>
                    <tr>
                      <th>PERSONAL PRONOUN</th>
                      <th>CONJUGATION</th>
                    </tr>
                  </thead>
                  <tbody id="myTable"></tbody>
                </table>

而这生成的表：

桌子

我怎样才能得到相同的结果，但使用这样的 json 结构？

  {
    "Yo": "abordo",
    "Tú": "abordas",
    "Él/Ella/Usted": "aborda",
    "Nosotros": "abordamos",
    "Vosotros": "abordáis",
    "Ellos/Ellas/Ustedes": "abordan"
  }

标签： javascriptjsonajax

解决方案

有几种方法可以做到这一点。

第一种选择是使用Object.keys方法

let buildTable = (data) => {
    let table = document.getElementById("myTable");

    Object.keys(data).forEach(key => {
        let row = `<tr>
                      <td>${key}</td>
                      <td>${data[key]}</td>
                   </tr>`;
        table.innerHTML += row;
    });
};

第二个选项是使用 for..in 循环

let buildTable = (data) => {
    let table = document.getElementById("myTable");

    for(const key in data) {
        let row = `<tr>
                      <td>${key}</td>
                      <td>${data[key]}</td>
                   </tr>`;
        table.innerHTML += row;
    }
};

但它也会从原型链中获取密钥（尽管在你的情况下应该不是问题），以避免用于hasOwnProperty过滤掉密钥

let buildTable = (data) => {
    let table = document.getElementById("myTable");

    for(const key in data) {
        if(!data.hasOwnProperty(key)) continue;

        let row = `<tr>
                      <td>${key}</td>
                      <td>${data[key]}</td>
                   </tr>`;
        table.innerHTML += row;
    }
};

3d 选项是 for..of 循环

let buildTable = (data) => {
    let table = document.getElementById("myTable");

    for(const [key, value] of Object.entries(data)) {
        let row = `<tr>
                      <td>${key}</td>
                      <td>${value}</td>
                   </tr>`;
        table.innerHTML += row;
    }
};

推荐阅读