Как написать веб-приложение для просмотра JSON на JS?

Question

[Indiftech]

Ранее не работал с JSON и только изучаю JS. Нужно написать приложение для просмотра JSON файлов в таком виде:


Как писать подобные веб-приложения и что посоветуете использовать для реализации? Нужно именно на JS

Answer 1

[StasEx]

1. Создать пустой массив оп типу:

const InfoArr = [{keyName: "shopperEmail", valueType: 'array'}]

2. Рекурсивно пройтись по циклу и определить typeof каждого элемента и вписать его в пустой массив

const jsonObj = JSON.parse( yourJson )
const keysArr = Object.keys(jsonObj)
keyArr.forEach(key => infoArr.push({keyName: key, valueType: typeof jsonObj[key]}))

Только нужно вызвать рекурсию если typeof будет являться объектом

Comments

[Indiftech]

Спасибо. А как потом отобразить результаты на HTML-странице?

[StasEx]

Indiftech, Допустим у нас такая разметка. Нужно создать элементы через цикл и добавить их к div content

<div id="content">
    <div class="item">
      <p>keyName</p>
      <small>valueType</small>
    </div>
</div>

// выбираем наш DIV, в который поместим новые элементы
   const content = document.getElementById('content');
   // создаем элементы
  for(let i = 0; i < InfoArr.length; i ++) {
     // создаем оболочку
     const newElement= document.createElement('button');
     newElement.classList.add("item");

     // создаем части нового элемента
     const nameElement = document.createElement('p');
     const typeElement = document.createElement('small');
     // заполняем их данными из массива
     nameElement .innerHTML = InfoArr[i].keyName;
     typeElement .innerHTML = InfoArr[i].valueType;
     // заполняем элемент его новыми частями
     newElement.appendChild(nameElement);
     newElement.appendChild(typeElement);
     
     //добавляем наш новый элемент в главный DIV
     content .appendChild(newElement);
  }

[Indiftech]

StasEx, Спасибо! Есть ли возможности упростить это при помощи библиотек?

[StasEx]

Indiftech, тут большой выбор.
Можно через старый добрый jQuery, можно через штуки посложнее, навроде Vue.js. Если есть силы и время, то можно позариться на React JS.
А так это классический JS, его вполне достаточно для этих целей.