使用javascript从json创建表

首先，我对javascript非常陌生。我试图从json文件创建一个表。我阅读了一些信息并学习了一些教程，最终我能够创建一个出现在web浏览器上的表格。但是我发现不同的数组总是被排序的，它只允许唯一的值。例如，以下是json：

var json = {
            "data": [
                {
                    "number": "13",
                    "position": "GK",
                    "name": "John"
                },
                {
                    "number": "2",
                    "position": "CB",
                    "name": "Bill"
                },
                {
                    "number": "26",
                    "position": "CB",
                    "name": "Nick"
                }

当我将信息放入我正在创建的表中时，它看起来是这样的：

| Number | Position | Name |
|   2    |    GK    | John |
|   13   |    CB    | Bill |
|   26   |undefined | Nick |

正如您所看到的，json文件中的数字与它们的名称不匹配，并且数字被排序，例如

John

不是数字

2

，而是数字

13

。另一件事是它不允许相同的值-有2个

CB

位置，但它只显示1个，另一个显示为

undefined

以下是我到目前为止写的内容：

     JSONDataLouder = {
     getPlayers: function(json) {
      var object = {
        "number": {}
        , "position": {}
        , "name": {}
    };

    var personData = null; 
    for (var i = 0; i < json.data.length; i++) {
        personData = json.data[i];
        object.number[personData.number] = 1;
        object.position[personData.position] = 1;
        object.name[personData.name] = 1;
    }

    var u = {
        "number": []
        , "position": []
        , "name": []
    };

    for(var k in object.number) u.number.push(k);
    for(var k in object.position) u.position.push(k);
    for(var k in object.name) u.name.push(k);


    return u;

}

,getTable: function(json) {

    var obj = this.getPlayers(json);

    var number = obj.number;
    var position = obj.position;
    var name = obj.name;

    var table = this.createTable();


    var headerRow = table.insertRow();
    headerRow.insertCell().innerHTML = "Number";
    headerRow.insertCell().innerHTML = "Position";
    headerRow.insertCell().innerHTML = "Name"


    for (var i = 0; i < number.length; i++) {
        var secondRow = table.insertRow();
        secondRow.style.textAlign="center";
        secondRow.insertCell().innerHTML = number[i];
        secondRow.insertCell().innerHTML = position[i];
        secondRow.insertCell().innerHTML = name[i];

    }

    return table;
}


,render: function(mainDiv) {

    $( mainDiv ).empty();
    var json = {
        "data": [
            {
                "number": "13",
                "position": "GK",
                "name": "John"
            },
            {
                "number": "2",
                "position": "CB",
                "name": "Bill"
            },
            {
                "number": "26",
                "position": "CB",
                "name": "Nick"
            }

JSONDataLouder={
getPlayers:function（json）{
变量对象={
“编号”：{}
，“位置”：{}
，“名称”：{}
};
var personData=null；
for（var i=0；i

---

我知道我在学习将对象推入数组时误解了一些东西，我试图以任何方式对其进行更改，但结果仍然是一样的。提前感谢您的时间。

我认为您遇到的问题是，在javascript中，哈希是不有序的，所以当您对（object.number中的var k）执行

操作时

，您不能期望每个数字的输出顺序与您输入的顺序相同

但是，数组将保持顺序

我认为您根本不需要

对象

变量。我认为您可以这样做：

JSONDataLouder = {
  getPlayers: function(json) {

  var u = {
    "number": [],
    "position": [],
    "name": []
  };

  var personData; 
  for (var i = 0; i < json.data.length; i++) {
    personData = json.data[i];
    u.number.push(personData.number);
    u.position.push(personData.position);
    u.name.push(personData.name);
  }

  return u;
}

JSONDataLouder={
getPlayers:function（json）{
变量u={
“编号”：[]，
“职位”：[]，
“名称”：[]
};
人眼变种；
for（var i=0；i

也许这对你有帮助

var json={
“数据”：[
{
“编号”：“13”，
“职位”：“GK”，
“姓名”：“约翰”
},
{
“编号”：“2”，
“职位”：“CB”，
“姓名”：“账单”
},
{
“编号”：“26”，
“职位”：“CB”，
“姓名”：“尼克”
}]
};
console.log（'N|mero | PosicióN | Nombre |'）；
$.each（json.data，函数（id，项）
{
console.log（item.number+'|'+item.position+'|'+item.name+'|'）；
})；

---

不同的测试数据可能会给你更疯狂的结果。代码中实际上有很多问题，但我认为让你偏离正轨的主要原因是混合了数据结构。在考虑表本身之前，先考虑一下中间数据结构，即某种（实际上）数据结构二维阵列

但问题是，您不需要中间结构。您的JSON.data中已经有一个数组。在您的代码中，您正在将这个数组转换为其他数组

考虑以下内容，它省略了您正在做的一些工作，但切入了表生成的核心

var json = {
    "data": [
        {
            "number": "13",
            "position": "GK",
            "name": "John"
        },
        {
            "number": "2",
            "position": "CB",
            "name": "Bill"
        },
        {
            "number": "26",
            "position": "CB",
            "name": "Nick"
        }
    ]
};


function objToTable(obj) {
    var data = obj.data;
    var output = '<table>';
    for (var i = 0; i < data.length; i++) {
        output += '<tr>';
        output += '<td>' + data[i].number + '</td>';
        output += '<td>' + data[i].position + '</td>';
        output += '<td>' + data[i].name + '</td>';
        output += '</tr>\n'; // added newline for console readability
    }
    output += '</table>';
    return output;
}


console.log(objToTable(json));

var json={
“数据”：[
{
“编号”：“13”，
“职位”：“GK”，
“姓名”：“约翰”
},
{
“编号”：“2”，
“职位”：“CB”，
“姓名”：“账单”
},
{
“编号”：“26”，
“职位”：“CB”，
“姓名”：“尼克”
}
]
};
功能对象（obj）{
var数据=对象数据；
var输出=“”；
对于（变量i=0；i
解析的
json
不是
json
。为什么每个人都这么叫javascript对象
json
？听起来像..谢谢你的快速回答。是的，我知道代码很糟糕，而且在某些方面不合逻辑，但我仍在努力弄清楚。我将进一步研究它