【问题标题】:how json array iteration can be done?如何完成json数组迭代?
【发布时间】:2016-05-30 18:30:12
【问题描述】:

我的 json 数组就像在 html 页面中收到的那样,它如何显示在表格中?意味着迭代 .plz 有帮助吗?我是新人。

[
    {"studentId":"1001259101","firstName":"RAKESH","lastName":"DALAL","year":"2012","course":"BSC"},
    {"studentId":"1001259101","firstName":"RAKESH","lastName":"DALAL","year":"2012","course":"BSC"},
    {"studentId":"1001259101","firstName":"RAKESH","lastName":"DALAL","year":"2012","course":"BSC"}
] 

【问题讨论】:

  • 到目前为止你尝试过什么?当您尝试某些事情并遇到困难时,该站点非常适合帮助您。但是从头开始编写代码是您自己的工作。
  • 这不是教程或代码编写服务。您应该能够找到大量教程来帮助您入门并在遇到合法代码问题时返回

标签: javascript html json


【解决方案1】:

遍历数组并将其显示在表格中:

var jsonObject = [
    {studentId: "1001259101", firstName: "RAKESH", lastName: "DALAL", year: "2012", course: "BSC"},
    {studentId: "1001259101", firstName: "RAKESH", lastName: "DALAL", year: "2012", course: "BSC"},
    {studentId: "1001259101", firstName: "RAKESH", lastName: "DALAL", year: "2012", course: "BSC"}
];

var output = "<table>";
for (var i = 0, len = jsonObject.length; i < len; i++) {
    var line = jsonObject[i];
    output += "<tr>";
    output += "<td>" + line.studentId + "</td>";
    output += "<td>" + line.firstName + "</td>";
    output += "<td>" + line.lastName + "</td>";
    output += "<td>" + line.year + "</td>";
    output += "<td>" + line.course + "</td>";
    output += "</tr>";
}
output += "</table>";

document.getElementById(...).innerHTML = output;

【讨论】:

    【解决方案2】:

    首先 JSON 是(JavaScript Object Notation)。相同的 JS,只是对象表示法的语法略有不同。

    你需要使用 AJAX 来接收来自其他文件的 JSON 数据,看看:

    var xhr = new XMLHttpRequest();
    var url = "myJSON.json"; // your JSON text file
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var myResponse = JSON.parse(xhr.responseText);
    
            display(myResponse); // send array to function
        }
    }
    
    xhr.open("GET", url, true);
    xhr.send(null);
    
    function display(arr) {
        var myTable = "<table>"; // create a table variable
    
        for (var i = 0; i < arr.length; i++) { // loop through array
            myTable += "<tr>";
            myTable += "<td>" + arr[i].studentId + "</td>";
            myTable += "<td>" + arr[i].firstName + "</td>";
            myTable += "<td>" + arr[i].lastName + "</td>";
            myTable += "<td>" + arr[i].year + "</td>";
            myTable += "<td>" + arr[i].course + "</td>";
            myTable += "</tr>";
        }
    
        myTable += "</table>";
    
        document.getElementById("myAwesomeTable").innerHTML = myTable; // display the final result in to html
    }
    
    1. 使用 AJAX 来打开您的 JSON 文本文件,可以是 .txt、.json 等。
    2. 使用 JSON.parse() 将 JSON 文本转换为数组
    3. 将该数组发送给函数
    4. 创建一个表格并将所有内容保存在变量中,如文本
    5. 遍历数组
    6. 以 html 格式显示您的表格

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-09-18
      • 2018-02-26
      • 2015-09-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多