如何将 JSON 数据存储为 JavaScript 表格格式？答案

【问题标题】：How to store JSON data into JavaScript table format?如何将 JSON 数据存储为 JavaScript 表格格式？
【发布时间】：2011-07-22 19:18:16
【问题描述】：

我正在开发一个 Web 应用程序，我使用 jQuery 1.5 和 JavaScript 作为应用程序的主要功能。我从我的应用程序连接到一个 RESTful 界面，在那里我获取一个人的信息。我使用这个函数从 json 页面中检索信息：

var jqxhr = $.getJSON("example.json", function() { // store the data in a table }

我的 json 格式的数据是这样的，但我会得到不止一个人具有以下格式：

[{"person":{"time":"2010-02-18T17:59:44","id":1,"name": "John","age":60, "updated_at":"010-02-18T17:59:44"}}]

如何在 JavaScript 表（更准确地说是数组）中只存储人的 id、姓名和年龄，而忽略其余信息？

【问题讨论】：

“javascript 表”是什么意思？
当你说“javascript table”时，你的意思是你想把它存储在一个普通的javascript数组中吗？
@Jonathan M：是的，很抱歉没有说清楚，我的意思是一个数组。

标签： javascript json jquery getjson

【解决方案1】：

这里是您需要的特定 JavaScript / jQuery，基于 MAP 函数。

var originalData = [
    { "person": { "time": "2010-02-18T17:59:34", "id": 1, "name": "John", "age": 60, "updated_at": "010-02-18T17:59:41"} },
    { "person": { "time": "2010-02-18T17:59:44", "id": 2, "name": "Bob", "age": 50, "updated_at": "010-02-18T17:59:42"} },
    { "person": { "time": "2010-02-18T17:59:54", "id": 3, "name": "Sam", "age": 40, "updated_at": "010-02-18T17:59:43"} }
];

var data = $.map(originalData, function (ele) {
    return { id: ele.person.id, name: ele.person.name, age: ele.person.age };
});

这是一个完整的示例，它将转换并以 HTML 格式显示结果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>
    <script type="text/javascript">

        function CreateTableView(objArray, theme, enableHeader) {
            // set optional theme parameter
            if (theme === undefined) {
                theme = 'mediumTable'; //default theme
            }

            if (enableHeader === undefined) {
                enableHeader = true; //default enable headers
            }

            // If the returned data is an object do nothing, else try to parse
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

            var str = '<table class="' + theme + '">';

            // table head
            if (enableHeader) {
                str += '<thead><tr>';
                for (var index in array[0]) {
                    str += '<th scope="col">' + index + '</th>';
                }
                str += '</tr></thead>';
            }

            // table body
            str += '<tbody>';
            for (var i = 0; i < array.length; i++) {
                str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
                for (var index in array[i]) {
                    str += '<td>' + array[i][index] + '</td>';
                }
                str += '</tr>';
            }
            str += '</tbody>'
            str += '</table>';
            return str;
        }


        $(document).ready(function () {
            var originalData = [
            { "person": { "time": "2010-02-18T17:59:34", "id": 1, "name": "John", "age": 60, "updated_at": "010-02-18T17:59:41"} },
            { "person": { "time": "2010-02-18T17:59:44", "id": 2, "name": "Bob", "age": 50, "updated_at": "010-02-18T17:59:42"} },
            { "person": { "time": "2010-02-18T17:59:54", "id": 3, "name": "Sam", "age": 40, "updated_at": "010-02-18T17:59:43"} }
        ];

            var data = $.map(originalData, function (ele) {
                return { id: ele.person.id, name: ele.person.name, age: ele.person.age };
            });

            $('#results').append(CreateTableView(data, 'lightPro', true));
        });
    </script>
</head>
<body>
    <div id="results" style="width: 500px; margin: 20px auto;">
</div>

【讨论】：

【解决方案2】：

你可以使用jQuery的map函数：

var data = $.map(originalData, function(person) {
    return { id: person.id, name: person.name, age: person.age };
});

map 基本上是转换 Array 中的每个项目，生成带有修改后对象的新 Array。

【讨论】：

抱歉，把你的答案弄得一团糟。想改进别人的编辑，但后来我后悔了，想回滚。

【解决方案3】：

    $.getJSON("example.json", function(data) { 
var name = data.person.name;
var id = data.person.id;
var age = data.person.age;
}

javascript 表到底是什么意思您可以通过

存储在html表中

var $table = $("<table>
<tr><td>name</td><td>"+name+"</td></tr>
<tr><td>id</td><td>"+id+"</td></tr>
<tr><td>age</td><td>"+age+"</td></tr>
</table>");

【讨论】：

@Prav Sharma：您的回答似乎不错，但首先，我需要将它们存储在一个数组中（我将问题编辑得更具体），其次，如果我提醒姓名、id 和年龄查看返回值，我得到所有三个“未定义”。