主页 / 问题 / 851324
Accepted
Aleksey exec
Asked:2020-07-07 04:14:18 +0800 CST2020-07-07 04:14:18 +0800 CST

如何解析json文件

  • 772

有一个products.json文件

[
 {
  "id": 1,
  "name": "stul"
 }
 {
  "id": 2,
  "name": "stol"
 }
]

这是布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
      <div class="product-container">
          <div class="product">
              <div class="id"></div>
              <div class="name"></div>
          </div>
      </div>
</body>
</html>

inproduct-container应该插入product ，但是其中可能有很多如何使用jquery将所有产品解析为 html或者如果有 1000 个产品基本上是个坏主意？

javascript

2 个回答

  1. 它可以是这样的：

    var data = [{
  "id": "0",
  "name": "stul"
}, {
  "id": "1",
  "name": "stol"
}, {
  "id": "4",
  "name": "json"
}]
$.each(data, function(i, u) {
  $('#product-container').append('<div class="product"><div class="id">' + u.id + '</div><div class="name">' + u.name + '</div></div>')
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product-container">
</div>

    对于解析JSON：

    $.getJSON("products.json", function (data) {
    alert(data);
});
    • 0
  2. Best Answer

    或者如果有 1000 个基本上是个坏主意？

    也许您不需要一次加载所有内容，您可以将其划分为页面或加载某些用户操作的部分（Lazy Loading）。

    如何使用jquery将所有产品解析为html

    如果你得到 JSON，不要解析。

    var url = "https://jsonplaceholder.typicode.com/users";
//----------------------------------------------------------------
// Посылает AJAX GET запрос
$.ajax({
    url: url,
  })
  .done(function(data) { // Возвращает JSON 
    var res = '';
    $.each(data, function(i, v) {
      // Add DIV with text name and data-id with id
      $('<div/>', {
          class: 'id',
          text: v.name,
          "data-id": v.id
        })
        .appendTo('.product'); // Добавляет в DIV
    })

  });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="product-container">
  <div class="product">
    <!-------- Adding resutl here -------->
  </div>
</div>

    • 0

相关问题