Разбор JSON строки

176

18 июня 2019, 16:40

Есть JSON строка с ответом от сервера такого вида

[{"id":"1","buy":"Купить"},{"id":"2","buy":"Купить"},{"id":"3","profit":"Снять"},{"id":"4","profit":"Снять"},{"id":"5","time":"1 минута"}]

Как разобрать элементы? К примеру 1 элемент мне нужно добавить в 1 div, 2 во второй div и т.д. если можно пример похожий.

Answer 1

const jsonStr = [{ 
    "id": "1", 
    "buy": "Купить" 
  }, 
  { 
    "id": "2", 
    "buy": "Купить" 
  }, 
  { 
    "id": "3", 
    "profit": "Снять" 
  }, 
  { 
    "id": "4", 
    "profit": "Снять" 
  }, 
  { 
    "id": "5", 
    "time": "1 минута" 
  } 
]; 
const container = document.getElementById('container'); 
 
jsonStr.forEach(function(item) { 
  const itemDiv = document.createElement('div'); 
  itemDiv.classList.add('card', 'm-2', 'p-2'); 
  itemDiv.id = item.id; 
  // Заполняем содержимое div 
  // разметку можно применять произвольную 
  let innerHtml = '<dl>'; 
  // Если нужно вывести и значения ключей 
  Object.keys(item).forEach(function(key) { 
    innerHtml += ` 
      <dt>${key}</dt> 
      <dd>${item[key]}</dd> 
    `; 
  }); 
  innerHtml += '</dl>'; 
  itemDiv.innerHTML = innerHtml; 
  // Добавляем элемент. Родительский элемент можно 
  // заменить на необходимый HTMLElement 
  container.appendChild(itemDiv); 
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> 
<div id="container" class="container"></div>