使用 Javascript 将 json 文件中的多个值写入 HTML table

Question

嘿嘿！

我有个小问题。我已经尝试了很多，但还没有找到解决方案。 ^^

有一个包含多个值的 json 文件。我想将文件中的值写入 HTML table 和 Javascript（不是 php！）。

举个例子：

Json 文件：

{
   "628e191673ae8f7750c62fce": {
     "name": "John",
     "surname": "Smith",
     "age": "24"
   },
   "628e1fd0d27981c6250d886c": {
     "name": "Fred",
     "surname": "Bloggs",
     "age": "32"
   },
   "628e20c805f38641bdc08d7d": {
     "name": "Joe",
     "surname": "Harris",
     "age": "27"
   }
}

table 应该如下所示：

Name	Surname	Age
John	Smith	24
Fred	Bloggs	32
Joe	Harris	27

我使用 Javascript 执行此操作的最佳方法是什么？先感谢您。 :)

Answer 1

好吧，你的 JSON 有点特别，因为你的 data-rows 不是数组，它们是属性......但你可以这样做......

const jsonData = {
   "628e191673ae8f7750c62fce": {
     "name": "John",
     "surname": "Smith",
     "age": "24"
   },
   "628e1fd0d27981c6250d886c": {
     "name": "Fred",
     "surname": "Bloggs",
     "age": "32"
   },
   "628e20c805f38641bdc08d7d": {
     "name": "Joe",
     "surname": "Harris",
     "age": "27"
   }
};


var firstIteration = true;

// create table element
for(var key1 in jsonData) { /* key1 will be the hex name */
  var row = jsonData[key1];

  // create tr element
  if (firstIteration) {
    for(var key2 in row) { /* key2 will be the attributes of the current row */
      // create th element with key2 as content
    }
    firstIteration = false;
  }
  for(var key2 in row) {
    // create td element with row[key2] as content
  }
  // close tr element
}
// close table element

Answer 2

简单的方法：

const jsonfile = {
  "628e191673ae8f7750c62fce": {
    "name": "John",
    "surname": "Smith",
    "age": "24"
  },
  "628e1fd0d27981c6250d886c": {
    "name": "Fred",
    "surname": "Bloggs",
    "age": "32"
  },
  "628e20c805f38641bdc08d7d": {
    "name": "Joe",
    "surname": "Harris",
    "age": "27"
  }
}
const parent = document.getElementById('table');
Object.keys(jsonfile).forEach(element => {
  const {
    name,
    surname,
    age
  } = jsonfile[element]
  let child = `<tr>
                            <th>${name}</th>
                            <th>${surname}</th>
                            <th>${age}</th>
                            </tr>`
  parent.insertAdjacentHTML('beforeend', child);
});

<table id="table">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Age</th>
  </tr>
</table>

Answer 3

您可以将代码分解成小的 bite-sized 函数，这些函数构建 table row-by-row 一路创建 HTML strings，然后将它们添加到 DOM.

const data = {"628e191673ae8f7750c62fce":{name:"John",surname:"Smith",age:"24"},"628e1fd0d27981c6250d886c":{name:"Fred",surname:"Bloggs",age:"32"},"628e20c805f38641bdc08d7d":{name:"Joe",surname:"Harris",age:"27"}};

// Returns a simple cell
function getCell(data) {
  return `<td>${data}</td>`;
}

// Returns an string of cells HTML
// `map` returns an array so we need to `join`
// the elements together
function getRow(data) {
  return data.map(getCell).join('');
}

// Returns a set of rows by `mapping`
// over the values of each object, and creating
// a new row for each object
function getRows(data) {
  return data.map(obj => {
    const values = Object.values(obj);
    return `<tr>${getRow(values)}</tr>`;
  }).join('');
}

// Get the object values from the data
const objs = Object.values(data);

// Get the keys from the first object of `objs`.
// This way we don't have to hard-code the headings
// in the HTML markup
const headers = Object.keys(objs[0]);

// Construct a table using the functions
const table = `
<table>
  <tbody>
    <tr class="headings">${getRow(headers)}</tr>
    ${getRows(objs)}
  </tbody>
</table>
`

// Add everything to a container
document.body.insertAdjacentHTML('beforeend', table);

table { border-collapse: collapse; border: 1px solid #454545; width: 300px;}
.headings { background-color: #efefef; font-weight: 600; text-transform: capitalize; }
td { padding: 0.3em; border: 1px solid #efefef;}

其他文档

使用 Javascript 将 json 文件中的多个值写入 HTML table

Write multiple values from json file into HTML table with Javascipt

html

javascript

json