Создание HTML-таблицы из вложенного JSON с помощью jQuery

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть пример JSON, подобный этому:

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

Я пытаюсь создать HTML-таблицу с двумя столбцами, называемыми что-то вроде «Make» и «Model», используя образец JSON с помощью jQuery, используя массив «cars» из JSON, не беря другие элементы транспортных средств и цвета. «Make» будут ключами JSON, а «Model» — значениями ключей. Я пытаюсь заставить ее выглядеть примерно так, как показано ниже, но в табличном формате. Любая помощь или совет были бы высоко оценены.

 Make    Model
Toyota  Camry
Ford    Explorer
Nissan  Altima
Jeep    Wrangler

1. Вы начали писать какой-либо JavaScript для ее синтаксического анализа?

2. Я единственный, кто чувствует себя странно из-за этого объекта car? Так и должно быть ”cars”: [{ “make”: “Nissan”, “model”: “Almera” }, {...}] , не так ли?

Ответ №1:

Используйте 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>

Ответ №2:

Используйте Object.keys для получения массива машин и перебора их с помощью forEach цикла. С помощью append в jquery добавьте строку в таблицу

 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>

1. Спасибо, это решение также сработало. Однако я могу выбрать только один ответ. Но я проголосовал за, надеюсь, показать другим, кто сталкивался с этим вопросом, что этот ответ также работает. Еще раз спасибо.

Ответ №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>

Ответ №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.

Ответ №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>