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

我正在开发一个web应用程序，并且我使用jQuery 1.5和JavaScript作为应用程序的主要功能。我从我的应用程序连接到一个RESTful界面，在那里我为一个人获取信息。我用这个功能来检索JSON页面中的信息：如何将JSON数据存储为JavaScript表格格式？

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，姓名和年龄并忽略其余信息？

来源

2011-07-22 tasanoui

你是什么意思 “的JavaScript表” 呢？ –

当你说“javascript table”时，你的意思是你想要将它存储在一个普通的javascript数组中吗？ –

@Jonathan M：对不起，我没有说清楚，我的意思是一个数组。 – tasanoui

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

什么确切地通过一个JavaScript表 u能在一个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>");

来源

2011-07-22 19:26:31

@Prav Sharma：你的答案似乎很好，但首先，我需要将它们存储在一个数组中（我编辑的问题更具体），其次，如果我提醒名称，ID和年龄以查看返回的值，我为他们三人得到“未定义”。 – tasanoui

您可以使用jQuery的map功能：

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

map每个项目基本上转换在Array，产生新的Array与修改的对象。

来源

2011-07-22 19:21:30 Jacob

对不起，编辑你的答案乱七八糟。想改善别人的编辑，但后来我后悔，想要回滚。 – Shef

下面是具体的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>

来源

2011-07-23 00:07:57 Zachary

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

回答

相关问题