как распарсить json файл

214

24 августа 2018, 16:50

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

Answer 1

или это в принципе плохая идея, если их будет 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>

Answer 2

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Cannot set property 'style' of null

Всем доброго времени суток

154

javascript

Чем отличаются два обращения к элементу?

В чем отличие в JS между documentgetElementById("element") и $('#element')? И первое и второе выбирают элемент по id

158

javascript

three.js текст из частиц

Создание текста из частиц в threejs с анимацией его появления - вот интересующий меня вопрос

203

javascript

Вопрос по JavaScript и HTML

Всем приветЯ написал скрипт для сайта он берет параметр из тега p и каждый час вычитает по 1 и вставляет обратно, но при обновлении страницы...

154