javascript - 循环内循环索引

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>