Question

首先，我对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"
            }

我知道在学习将对象推入数组时我误解了一些东西，并且我试图以任何方式改变它，但它仍然显得相同。提前感谢您的时间。

Answer 1

我认为您遇到的问题是，在javascript中，哈希没有排序，所以当您执行for(var k in object.number)时，您不能指望每个数字都按照您输入的顺序排列。

然而，

数组将保留顺序。

我认为您根本不需要object变量。我想你可以这样做：

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;
}

Answer 2

不同的测试数据会让您获得更加疯狂的结果。代码中实际上存在很多问题，但我认为让你偏离轨道的主要问题是混合你的数据结构。在考虑表本身之前，请考虑一下您的中间数据结构，即某种（实际上）二维数组。

但事实上，你不需要中间结构。您的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));

Answer 3

也许这可以帮到你

    var json = {
      "data": [
        {
          "number": "13",
          "position": "GK",
          "name": "John"
        },
        {
          "number": "2",
          "position": "CB",
          "name": "Bill"
        },
        {
          "number": "26",
          "position": "CB",
          "name": "Nick"
        }]
      };
        
        console.log('|  Número  |  Posición  |  Nombre  |');

        $.each(json.data, function(id, item)
        {
         
             console.log(item.number + '|' + item.position + '|' + item.name + '|');
        
        });

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

使用javascpirt从json创建表

3 个答案: