Question

我正在尝试从本地JSON文件输出数据，但是我对JSON很陌生，所以有点困惑。

我的HTML文件的片段

<html> etc....
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="target1"></div>
      <script src="scripts/main.js"></script>
</body>
</html>

.JSON文件

{
  "results": [
    {
      "name": "Alex",
      "age": "20",
      "url": "facebook.com/alex"
    },
    {
      "name": "Tom",
      "age": "25",
      "url": "facebook.com/tom"
    },

JAVASCRIPT文件的开始

$.getJSON('file.json', function(data) {
  console.log(data);
}); //loads JSON file into the console


//Creates a table
function makeTable(rows, columns, target){

  let tbl = document.createElement("table");

//Loop to create the number of rows
  for(let r = 0; r < rows; r++){
    let newRow = tbl.insertRow();  // Create a new row in the table

//Creates number of columns
    for(let c = 0; c < columns; c++){
      let newCell = newRow.insertCell();  // Create new cell
      newCell.textContent = "Row " + (r + 1) + " - Cell " + (c + 1); // populate
    }
  }
  // Add the new table as a child of the referenced, pre-existing element on the page
  target.appendChild(tbl);
  return tbl; // return a reference to the new table
}

// ************************************************
//Section to modify table elements

//Selects the html table name
let target1 = document.getElementById("target1");

//Calls create table function 
let newTable1 = makeTable(10,2, target1);  // Make a 5 x 4 table in the first div

//Modiy table elements
let cellToModify1 = newTable1.rows[0].cells[0];
cellToModify1.textContent = "OVERRIDDEN!";
cellToModify1.classList.add("updated");

当前，此输出为2x10表格。

我想做的是，在表格中附加框以显示JSON文件中的数据，例如一个框中显示Alex的数据，然后另一个显示Tom的数据。

将JSON数据存储在HTML表中

0 个答案: