Question

这是继续形式：Passing array php into json gives undefined 。所以我有一个名为response.isi的json基于这样的成功ajax：

{
"0": {
    "0": "NO",
    "1": "COLUMN1",
    "2": "COLUMN2",
    "3": "COLUMN3",
    "4": "COLUMN4",
    "5": "COLUMN5",
    "6": "COLUMN6",
    "7": "COLUMN7",
    "8": "COLUMN8",
    "9": "COULMN9",
    "10": "COLUMN10",
    "11": "COLUMN11",
    "12": "COLUMN12",
    "13": "COLUMN13"
},
"1": {
    "0": "1",
    "1": "NYK FUJI ",
    "2": "AJU150708 ",
    "3": " ",
    "4": "6C7132 ",
    "5": "977NEF ",
    "6": "JKT-P.T.IRON WORKS ",
    "7": "977NEF ",
    "8": "KCH8ATDM ",
    "9": "17.9",
    "10": "1690",
    "11": "2150",
    "12": "6C7132-1690 ",
    "13": "175"
},
"2": {
    "0": "2",
    "1": "NYK FUJI ",
    "2": "AJU150708 ",
    "3": " ",
    "4": "6C7132 ",
    "5": "977NEF ",
    "6": "JKT-P.T.IRON WORKS ",
    "7": "977NEF ",
    "8": "KCH8ATDM ",
    "9": "17.9",
    "10": "1700",
    "11": "2138",
    "12": "6C7132-1700 ",
    "13": "176"
  }
}

它看起来很有魅力。现在，我混淆了访问它们到interprated到html表。我像这样使用jquery：

 $.each(response.isi, function (i, item) {
  $('#table-review').find('tbody').append("<tr>" +
    "<td>" + item + "</td>" +
     "</tr>");
 });

看起来很傻，因为我的代码只创建了三行，一行就像这样

+--------------+
|object Object |
|object Object |
|object Object |
+--------------+

但是，我需要三行13列。附：在我的情况下只有13列，但在生产

Answer 1

请尝试这个（尚未测试过）：

var html = "";
for(var val in item){
   html += "<tr>";
   for(var cols in item[val])
    {
        html += "<td>" + item[val][cols ] + "</td>";
    }
   html += "</tr>";
}
$('#table-review').find('tbody').append(html);

编辑：我测试了它并且有效，请看下面的小提琴：

Check Demo Here

Answer 2

<div class="form-group"> <label for="games">Games</label><br> <select name="games" id="games" class="selectpicker" multiple data-selected-text-format="count > 3" title="Choose games..."> @foreach($clientgameids as $clientgameid) <option value="{{ $clientgameid->client_game_id }}">{{ $clientgameid->client_game_name }}</option> @endforeach </select> </div>内的item是等于each的对象。所以你需要循环response.isi["0"]来创建列。为了更好地理解，我将内部变量重命名为item和row。

column

var response = {};
response.isi = {
"0": {
    "0": "NO",
    "1": "COLUMN1",
    "2": "COLUMN2",
    "3": "COLUMN3",
    "4": "COLUMN4",
    "5": "COLUMN5",
    "6": "COLUMN6",
    "7": "COLUMN7",
    "8": "COLUMN8",
    "9": "COULMN9",
    "10": "COLUMN10",
    "11": "COLUMN11",
    "12": "COLUMN12",
    "13": "COLUMN13"
},
"1": {
    "0": "1",
    "1": "NYK FUJI ",
    "2": "AJU150708 ",
    "3": " ",
    "4": "6C7132 ",
    "5": "977NEF ",
    "6": "JKT-P.T.IRON WORKS ",
    "7": "977NEF ",
    "8": "KCH8ATDM ",
    "9": "17.9",
    "10": "1690",
    "11": "2150",
    "12": "6C7132-1690 ",
    "13": "175"
},
"2": {
    "0": "2",
    "1": "NYK FUJI ",
    "2": "AJU150708 ",
    "3": " ",
    "4": "6C7132 ",
    "5": "977NEF ",
    "6": "JKT-P.T.IRON WORKS ",
    "7": "977NEF ",
    "8": "KCH8ATDM ",
    "9": "17.9",
    "10": "1700",
    "11": "2138",
    "12": "6C7132-1700 ",
    "13": "176"
  }
};

$.each(response.isi, function(r, row) {
    var tr = $('#table-review').find('tbody').append("<tr>");
  
    $.each(row, function(c, column) {
        tr.append("<td>" + column + "</td>");
    });
});

Answer 3

您似乎没有在JSON中获取每个密钥的值。

一个简单的解释是，每个JSON对象都有键和值。

object {
    key: value,
    key: value,
    key: value
}

因此，您需要在每个对象内迭代并获取每个属性值。像这样：

for (var col = 0; col < 14; col++) {
  for (var row = 0; row < 14; row++) {
    $('#table-review').find('tbody')
      .append(
       "<tr>" + "<td>" + item[col][row] + "</td>" + "</tr>"
     );
  }
}

Answer 4

使用通用tableMaker可以生成表格HTML。它需要一组对象。每个对象表示一个行，其中对象属性用作标题（如果第二个参数提供为true），则值为单元格。

在您的情况下，我们有一个名为getTableData的实用程序函数，它将您的数据转换为要提供给tableMaker的对象数组。

＆＃13;

function tableMaker(o,h){
  var keys = Object.keys(o[0]),
  rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                  : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
      rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
  return "<table>" + rows + "</table>";
}

function getTableData(data){
  var ok = Object.keys(data);
  return ok.map(k => data[k]);
} 

var data = {
"0": {
    "0": "NO",
    "1": "COLUMN1",
    "2": "COLUMN2",
    "3": "COLUMN3",
    "4": "COLUMN4",
    "5": "COLUMN5",
    "6": "COLUMN6",
    "7": "COLUMN7",
    "8": "COLUMN8",
    "9": "COULMN9",
    "10": "COLUMN10",
    "11": "COLUMN11",
    "12": "COLUMN12",
    "13": "COLUMN13"
},
"1": {
    "0": "1",
    "1": "NYK FUJI ",
    "2": "AJU150708 ",
    "3": " ",
    "4": "6C7132 ",
    "5": "977NEF ",
    "6": "JKT-P.T.IRON WORKS ",
    "7": "977NEF ",
    "8": "KCH8ATDM ",
    "9": "17.9",
    "10": "1690",
    "11": "2150",
    "12": "6C7132-1690 ",
    "13": "175"
},
"2": {
    "0": "2",
    "1": "NYK FUJI ",
    "2": "AJU150708 ",
    "3": " ",
    "4": "6C7132 ",
    "5": "977NEF ",
    "6": "JKT-P.T.IRON WORKS ",
    "7": "977NEF ",
    "8": "KCH8ATDM ",
    "9": "17.9",
    "10": "1700",
    "11": "2138",
    "12": "6C7132-1700 ",
    "13": "176"
  }
},
tableData = getTableData(data),
tableHTML = tableMaker(tableData,true);
myTable.innerHTML = tableHTML;

＆＃13;

<div id="myTable"></div>

＆＃13;

用于在json中循环以创建html表

4 个答案: