Как написать JSON Viewer на JS?

@SymerHyb · Регистрация: 13.01.2021

Нужно написать JSON Viewer на JS. Еще только начинаю учить JS и Фронт, поэтому нужна помощь.

HTML5

<div id="content">
    <div class="item">
      <p>keyName</p>
      <small>valueType</small>
    </div>
</div>
 
 
<input type="file" id="your-files" multiple  accept="JSON">

Есть такой скрипт обработки input:

Javascript

 var file = document.getElementById('your-files');
 
file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'json':
      break;
    default:
      alert('Выберите файл .JSON');
      this.value = '';
  }
};

Обработка JSON:
// заполняю массив элементами JSON

Javascript

const InfoArr = [{keyName: "shopperEmail", valueType: 'array'}
 
// прохожусь по массиву. Как поместить в пустой массив элементы с файла JSON?
const jsonObj = JSON.parse( yourJson )
const keysArr = Object.keys(jsonObj)
keyArr.forEach(key => infoArr.push({keyName: key, valueType: typeof jsonObj[key]}))
 
 
//
 
// выбираем наш 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);
  }

Вот какие вопросы есть:

1) Как правильно организовать обработку JSON на стороне клиента?
Например, юзер загружает file JSON. JS сначала проверяет соответствие расширению. Далее нужно перейти к обработке JSON
2)Как поместить в пустой массив элементы с файла JSON?

@web_coder2 · 15.01.2021, 22:48

Привет SymerHyb,

PHP/HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    *{
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>
<div class="container-output">
<pre>
 
</pre>
</div>
<script>
  var spaces = 4
  $output = document.querySelector(".container-output pre")
  let testJSON = {
    prop1: "val1",
    prop2: {
      prop1: "val1",
      prop2: [1,2,3,45,7]
    }
  }
  let jsonString = JSON.stringify(testJSON)
  let jsonObj
  try{
    jsonObj = JSON.parse(jsonString)
  }
  catch(err){
    alert(err.message)
  }
 
  function parseJSON(obj, nesting = 0){
    if(obj instanceof Object){
      for (const [key, value] of Object.entries(obj)) {
        $output.innerHTML += `${" ".repeat(nesting * spaces)}${key}\n`
        parseJSON(value, nesting + 1)
      }
    }
    else{
      $output.innerHTML += `${" ".repeat(nesting * spaces)}${obj}\n`
      return;
    }
  }
 
  parseJSON(jsonObj)
 
</script>
</body>
</html>

@SymerHyb · 15.01.2021, 23:15 **[ТС]**

web_coder2, Привет! Спасибо. Не очень понимаю как это работает. Можете прокомментить код JS?

@web_coder2 · 15.01.2021, 23:48

Сообщение от SymerHyb

web_coder2, Привет! Спасибо. Не очень понимаю как это работает. Можете прокомментить код JS?

для вывода форматированного объекта я использовал тег pre который сохраняет форматирование, т.е. он проще в использовании не нужно морочиться html элементами, но в yего можно вставлять span элементы например для подсветки свойств или еще чего-нибудь

это тестовый объект, может быть любым даже массивом

Javascript

  let testJSON = {
    prop1: "val1",
    prop2: {
      prop1: "val1",
      prop2: [1,2,3,45,7]
    }
  }

тут я просто продемонстрировал как получить строку из тестового объекта, и обратно объект, и обработку ошибок, на этапе парсинга строки json

Javascript

  let jsonString = JSON.stringify(testJSON)
  let jsonObj
  try{
    jsonObj = JSON.parse(jsonString)
  }
  catch(err){
    alert(err.message)
  }

это рекурсивная функция, которая проходит по всем свойствам объекта и выводит результаты в pre элемент, ее можно существенно доделать чтобы, она как то по особенному выводила.

Javascript

  function parseJSON(obj, nesting = 0){
    if(obj instanceof Object){
      for (const [key, value] of Object.entries(obj)) {
        $output.innerHTML += `${" ".repeat(nesting * spaces)}${key}\n`
        parseJSON(value, nesting + 1)
      }
    }
    else{
      $output.innerHTML += `${" ".repeat(nesting * spaces)}${obj}\n`
      return;
    }
  }

Вот пример кода который выведет результат в консоль

Javascript

  var spaces = 4
 
  let testJSON = {
    prop1: "val1",
    prop2: {
      prop1: "val1",
      prop2: [1,2,3,45,7]
    }
  }
  let jsonString = JSON.stringify(testJSON)
  let jsonObj
  try{
    jsonObj = JSON.parse(jsonString)
  }
  catch(err){
    console.log(err.message)
  }
 
  function parseJSON(obj, nesting = 0){
    if(obj instanceof Object){
      for (const [key, value] of Object.entries(obj)) {
        console.log("-".repeat(nesting * spaces), key)
        parseJSON(value, nesting + 1)
      }
    }
    else{
      console.log("-".repeat(nesting * spaces), obj)
      return;
    }
  }
 
  parseJSON(jsonObj)

из объекта

Javascript

 let testJSON = {
    prop1: "val1",
    prop2: {
      prop1: "val1",
      prop2: [1,2,3,45,7]
    }
  }

получаем строку json

Код

{"prop1":"val1","prop2":{"prop1":"val1","prop2":[1,2,3,45,7]}}

функция parseJSON выведет такой код

Код

 prop1
---- val1
 prop2
---- prop1
-------- val1
---- prop2
-------- 0
------------ 1
-------- 1
------------ 2
-------- 2
------------ 3
-------- 3
------------ 45
-------- 4
------------ 7

@SymerHyb · 16.01.2021, 01:10 **[ТС]**

Большое спасибо!) Стало гораздо понятней.

Как написать JSON Viewer на JS?

Решение

Решение

@SymerHyb 0 / 0 / 0 Регистрация: 13.01.2021 Сообщений: 5
	15.01.2021, 23:15 [ТС]	3
	web_coder2, Привет! Спасибо. Не очень понимаю как это работает. Можете прокомментить код JS? 0

@SymerHyb 0 / 0 / 0 Регистрация: 13.01.2021 Сообщений: 5
	16.01.2021, 01:10 [ТС]	5
	Большое спасибо!) Стало гораздо понятней. 0

Опции темы