Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/12: Рейтинг темы: голосов - 12, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 13.01.2021
Сообщений: 5
1

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

14.01.2021, 20:28. Просмотров 2413. Ответов 4

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

HTML5
1
2
3
4
5
6
7
8
9
<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
1
2
3
4
5
6
7
8
9
10
11
12
 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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?
0
Миниатюры
Как написать JSON Viewer на JS?  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.01.2021, 20:28
Ответы с готовыми решениями:

Nero secure disk viewer. После добавления файла на зашифрованный диск, secure viewer не видит фалов
Всех приветствую. Случилась малость не приятность. Имелся перезаписываемый диск блю-рей с...

Установка API Viewer: 'The API Viewer was loaded, but could not added to a menu'.
Не установить API Viewer. Ругается так: 'The API Viewer was loaded, but could not added to a menu'.

Как написать конвертор для преобразования json в текст?
Как написать подобный конвектор для преобразования json в текст?...

Как написать Action метод для получения Json объекта из POST запроса
Здравствуйте, я в технологии ASP NET Core начинающий. Вопрос скорее образовательный. Задача...

4
741 / 347 / 99
Регистрация: 04.10.2018
Сообщений: 545
15.01.2021, 22:48 2
Лучший ответ Сообщение было отмечено Mr_Sergo как решение

Решение

Привет SymerHyb,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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>
2
0 / 0 / 0
Регистрация: 13.01.2021
Сообщений: 5
15.01.2021, 23:15  [ТС] 3
web_coder2, Привет! Спасибо. Не очень понимаю как это работает. Можете прокомментить код JS?
0
741 / 347 / 99
Регистрация: 04.10.2018
Сообщений: 545
15.01.2021, 23:48 4
Лучший ответ Сообщение было отмечено SymerHyb как решение

Решение

Цитата Сообщение от SymerHyb Посмотреть сообщение
web_coder2, Привет! Спасибо. Не очень понимаю как это работает. Можете прокомментить код JS?
для вывода форматированного объекта я использовал тег pre который сохраняет форматирование, т.е. он проще в использовании не нужно морочиться html элементами, но в yего можно вставлять span элементы например для подсветки свойств или еще чего-нибудь

это тестовый объект, может быть любым даже массивом
Javascript
1
2
3
4
5
6
7
  let testJSON = {
    prop1: "val1",
    prop2: {
      prop1: "val1",
      prop2: [1,2,3,45,7]
    }
  }
тут я просто продемонстрировал как получить строку из тестового объекта, и обратно объект, и обработку ошибок, на этапе парсинга строки json

Javascript
1
2
3
4
5
6
7
8
  let jsonString = JSON.stringify(testJSON)
  let jsonObj
  try{
    jsonObj = JSON.parse(jsonString)
  }
  catch(err){
    alert(err.message)
  }
это рекурсивная функция, которая проходит по всем свойствам объекта и выводит результаты в pre элемент, ее можно существенно доделать чтобы, она как то по особенному выводила.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
  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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  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
1
2
3
4
5
6
7
 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
4
0 / 0 / 0
Регистрация: 13.01.2021
Сообщений: 5
16.01.2021, 01:10  [ТС] 5
Большое спасибо!) Стало гораздо понятней.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.01.2021, 01:10

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

MS Help Viewer 1.1 - как пользоваться
Добрый день! Очень прошу помощи! Подскажите как работать с просмотрщиками H3Viewer и MS Help...

Как создать xps viewer
Привет всем! Помогите п-а как создать xps или PDF viewer

JSON Reader. Как прочитать значение переменной в строке JSON
Добрый день! Подскажите пожалуйста как прочитать значение переменной в строке JSON: Есть...

Как отправить json post запросом и принят json в ответ?
Вообщем начал постигать новую windows phone... Решил сразу попытаться наладить общение с сервером....

Как правильно прописать коллекцию в JSON конфигурации appsettings.json?
Всем привет. Подскажите, как в appsettings.json правильно прописать список админов? Я здесь...

Как распарсить данные из первого json-а и перекинуть их в другой json
Добрый день, столкнулся с такой задачей. Есть вот такой json Необходимо извлечь...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.