0

есть файл 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>

в product-container должны вставляться product но их может быть много как сделать что бы все продукты распарсились в html c помощью jquery или это в принципе плохая идея, если их будет 1000 штук?

2 ответа 2

0

или это в принципе плохая идея, если их будет 1000 штук?

Возможно вам нужно подгружать не все сразу, можно разделить на страницы или подгружать части на определенные действия юзера (Lazy Loading).

как сделать что бы все продукты распарсились в html c помощью jquery

Если получаете 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

Можно вот так:

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);
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.