Question

我正在使用JSON构建一个HTML表来填充它。

这是JSON：

{
    "grid": {
        "name": "JsonGrid",
        "columns": [
            {
                "name": "ID",
                "width": "100px"
            },
            {
                "name": "Name",
                "width": "100%"
            },
            {
                "name": "Departments",
                "width": "250px"
            },
            {
                "name": "Locations",
                "width": "250px"
            }
        ]
    },
    "data": [
        {
            "id": 1,
            "name": "Company A",
            "departments": [
                "Software",
                "Recruitment",
                "Consulting"
            ],
            "locations": [
                "Sheffield",
                "Rotherham",
                "London",
                "New York"
            ]
        },
        {
            "id": 2,
            "name": "Company B",
            "departments": "",
            "locations": [
                "Hillsborough",
                "City Centre",
                "Crystal Peaks"
            ]
        },
        {
            "id": 3,
            "name": "Company C",
            "departments": [
                "Medical",
                "Family",
                "Criminal"
            ],
            "locations": [
                "Sheffield",
                "Rotherham"
            ]
        }
    ]
}

和循环数据对象的函数：

function addDataFromJson(json)
{
    var data = json.data;

    for(var i=0;i<data.length;i++) // for each row
    {
        var columns = '';

        for(var b=0;b<Object.keys(data[i]).length;b++) // for each column
        {
            var content = data[i][b];

            console.log(content);

            columns += '<td>'+content+'</td>';
        }

        var row = columns;

        $( '<tr>' + row + '</tr>' ).appendTo('.uiGridContent tbody').hide().fadeIn();
    }
}

所以我循环获取行并查看内部以找到我需要的列，然后尝试将数据放入每列，然后追加行。列和行是完美的，但数据永远不会被拉出来！

当我进入第二个循环拉动每列的实际数据时，我感到很困惑。内容变量应该包含什么？考虑到有时内容可能包含数组而不仅仅是字符串。

Answer 1

问题是使用b，它只是键的索引，而不是实际的属性键所以你需要

var content = data[i][Object.keys(data[i])[b]];

像

var json = {
  "grid": {
    "name": "JsonGrid",
    "columns": [{
      "name": "ID",
      "width": "100px"
    }, {
      "name": "Name",
      "width": "100%"
    }, {
      "name": "Departments",
      "width": "250px"
    }, {
      "name": "Locations",
      "width": "250px"
    }]
  },
  "data": [{
    "id": 1,
    "name": "Company A",
    "departments": [
      "Software",
      "Recruitment",
      "Consulting"
    ],
    "locations": [
      "Sheffield",
      "Rotherham",
      "London",
      "New York"
    ]
  }, {
    "id": 2,
    "name": "Company B",
    "departments": "",
    "locations": [
      "Hillsborough",
      "City Centre",
      "Crystal Peaks"
    ]
  }, {
    "id": 3,
    "name": "Company C",
    "departments": [
      "Medical",
      "Family",
      "Criminal"
    ],
    "locations": [
      "Sheffield",
      "Rotherham"
    ]
  }]
};

function addDataFromJson(json) {
  var data = json.data;

  for (var i = 0; i < data.length; i++) // for each row
  {
    var columns = '',
      keys = Object.keys(data[i]);

    for (var b = 0; b < keys.length; b++) // for each column
    {
      var content = data[i][keys[b]];

      console.log(content);

      columns += '<td>' + content + '</td>';
    }

    var row = columns;

    $('<tr>' + row + '</tr>').appendTo('.uiGridContent tbody').hide().fadeIn();
  }
}

addDataFromJson(json)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="uiGridContent">
  <tbody></tbody>
</table>

更简单的方法是

var json = {
  "grid": {
    "name": "JsonGrid",
    "columns": [{
      "name": "ID",
      "width": "100px"
    }, {
      "name": "Name",
      "width": "100%"
    }, {
      "name": "Departments",
      "width": "250px"
    }, {
      "name": "Locations",
      "width": "250px"
    }]
  },
  "data": [{
    "id": 1,
    "name": "Company A",
    "departments": [
      "Software",
      "Recruitment",
      "Consulting"
    ],
    "locations": [
      "Sheffield",
      "Rotherham",
      "London",
      "New York"
    ]
  }, {
    "id": 2,
    "name": "Company B",
    "departments": "",
    "locations": [
      "Hillsborough",
      "City Centre",
      "Crystal Peaks"
    ]
  }, {
    "id": 3,
    "name": "Company C",
    "departments": [
      "Medical",
      "Family",
      "Criminal"
    ],
    "locations": [
      "Sheffield",
      "Rotherham"
    ]
  }]
};

function addDataFromJson(json) {
  var data = json.data;

  var rows = $.map(data, function(record) {
    var cols = $.map(record, function(value, key) {
      return '<td>' + value + '</td>';
    })
    return '<tr>' + cols + '</tr>';
  })
  $(rows.join('')).hide().appendTo('.uiGridContent tbody').fadeIn();
}

addDataFromJson(json)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="uiGridContent">
  <tbody></tbody>
</table>

Answer 2

更好地使用ECMAScript 5.1帮助程序以更好地理解代码的作用：

function addDataFromJSON(json) {
  //just check that data is array
  var data = json && Array.isArray(json.data) ? json.data : [];

  data.forEach(function(rowObject) {
    //every loop will create a row
    var tr = document.createElement('tr');

    Object.keys(rowObject).forEach(function(cellKey) {
      //every loop will create a cell
      var td = document.createElement('td');
      td.innerText = rowObject[cellKey];
      tr.appendChild(td);
    });

    table.appendChild(tr);

  });

}

＆＃13;

var table = document.querySelector('#table');
var jsonData = {
  "data": [{ //this is row
    "id": 1, // this is a cell value
    "name": "Company A",
    "departments": [
      "Software",
      "Recruitment",
      "Consulting"
    ],
    "locations": [
      "Sheffield",
      "Rotherham",
      "London",
      "New York"
    ]
  }, { //this is one more row
    "id": 2,
    "name": "Company B",
    "departments": "",
    "locations": [
      "Hillsborough",
      "City Centre",
      "Crystal Peaks"
    ]
  }]
};

function addDataFromJSON(json) {
  //just check that data is array
  var data = json && Array.isArray(json.data) ? json.data : [];

  data.forEach(function(rowObject) {
    //every loop will create a row
    var tr = document.createElement('tr');

    Object.keys(rowObject).forEach(function(cellKey) {
      //every loop will create a cell
      var td = document.createElement('td');
      td.innerText = rowObject[cellKey];
      tr.appendChild(td);
    });

    table.appendChild(tr);

  });

}

addDataFromJSON(jsonData);

＆＃13;

table,
td {
  border: 1px solid #ccc;
  border-spacing: 0;
  border-collapse: collapse;
}
td {
  padding: 5px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <table id=table></table>
</body>

</html>

＆＃13;

在循环索引中循环

2 个答案: