Question

我有一个这样的示例JSON：

 }
   "vehicles":"4door",
   "cars": {
   "Toyota":"Camry",
   "Ford":"Explorer",
   "Nissan":"Altima",
   "Jeep":"Wrangler"
   },
   "color":"red"
 }

我正在尝试使用带有JSON的示例JSON和JQuery并使用JSON中的“ cars”数组来创建一个包含2列的HTML表格，这些名称称为“ Make”和“ Model”，而不会使其他项目变色。 “ Make”将是JSON的键，而“ Model”将是键的值。我试图让它看起来像下面这样，但以表格格式。任何帮助或建议，将不胜感激。

Make    Model
Toyota  Camry
Ford    Explorer
Nissan  Altima
Jeep    Wrangler

Answer 1

使用Object.keys获取一组汽车，并使用forEach循环遍历它们。在jquery中使用append将行追加到表中

var data = {
  "vehicles": "4door",
  "cars": {
    "Toyota": "Camry",
    "Ford": "Explorer",
    "Nissan": "Altima",
    "Jeep": "Wrangler"
  },
  "color": "red"
}
var str='';
Object.keys(data.cars).forEach(e => {
  str+='<tr><td>' + e + '</td><td>' + data.cars[e] + '</td></tr>';
})
$('#data').append(str)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr>
    <td>Make</td>
    <td>Model</td>
  </tr>
</table>

Answer 2

使用Object.keys会得到keys的数组，然后您可以对其进行迭代并从对象中获取key value并使用模板文字来创建一行并最后附加到table

let cars = {
  "Toyota": "Camry",
  "Ford": "Explorer",
  "Nissan": "Altima",
  "Jeep": "Wrangler"
}

let getKeys = Object.keys(cars);


let row = '';
for (let i = 0; i < getKeys.length; i++) {
  row += `<tr><td>${getKeys[i]}</td><td>${cars[getKeys[i]]}</td></tr>`
}

$('#carTable').append(row)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='carTable'>

</table>

Answer 3

您还可以通过脚本创建整个HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var html = ""
var json = {
"vehicles":"4door",
"cars": {
"Toyota":"Camry",
"Ford":"Explorer",
"Nissan":"Altima",
"Jeep":"Wrangler"
},
"color":"red"
}
html = "<table><thead><th><td>Make</td><td>Model</td></th></thead><tbody>"
for(var x in json.cars){
    html+= "<tr><td>"+ x +"</td><td>"+ json.cars[x] +"</td></tr>"
}
html+="</tbody></table>"
$("#main").append(html)
});
</script>
</head>
<body>

<div id="main"></div>

</body>
</html>

Answer 4

在这里，我看到json格式不正确，也将jsonObject.KeyName保留在变量中，然后循环保存变量的json。

var obj = {"Toyota":"Camry",   "Ford":"Explorer",   "Nissan":"Altima",   Jeep":"Wrangler"};
for (var key in obj) {  
if (obj.hasOwnProperty(key)) {
    var val = obj[key];
    console.log(val);
  }
}

之后，您将以html格式实现。

Answer 5

var data = {
   "vehicles": "4door",
    "cars": {
        "Toyota": "Camry",
        "Ford": "Explorer",
        "Nissan": "Altima",
         "Jeep": "Wrangler"
    },
   "color": "red"
};
var cars = data.cars; // for better performance if large table
var tableData = Object.keys(cars).map(item => '<tr><td>' + item + '</td><td>' + cars[item] + '</td></tr>').join('');

$('#main>table').append(tableData)


<div id="main">
   <table>
     <tr>
        <td>Make</td>
        <td>Model</td>
     </tr>
   </table>
</div>

使用JQuery从嵌套JSON创建HTML表

5 个答案: