Как данные из .json вставить в новый объект в HTML. [AJAX]

@InFuz · Регистрация: 27.09.2015

Студворк — интернет-сервис помощи студентам

Имеется файл .json содержащий в себе "текст" сообщения, "автора" этого сообщения и "дату" сообщения.

Code
1
2
3
4
5
"post": {
    "content": "bla bla bla",
    "date": "2014-01-01T23:28:56.782Z",
    "author": 2,
}

Имеется сверстанный шаблон страницы, где на "стене" должно появиться сообщение из файла .json, пускай для начала в самом примитивном виде например таком, мне главное разобраться потом уже оформлю как мне нужно.

Code
1
2
3
4
5
<div class=message>
  <p class=content>bla bla bla</p>
  <p class=date>2014-01-01T23:28:56.782</p>
  <p class=author>user 2</p>
</div>

Как собственно юзая голы JS без фреймворков, получить эти данные из файла .json и вставить их в DOM HTML документа? (дабы не юзать сервер, а работать с файлами для хромиума подсказали юзать параметр запуска chromium --allow-file-access-from-files)

@scio me nescire · 30.01.2016, 00:50

del

@notsliva · 30.01.2016, 05:11

Т.е. Вы хотите получить доступ из браузера к локальному файлу на компьютере, рядом с html-страницей?

@InFuz · 30.01.2016, 15:46 **[ТС]**

Собственно да. Но самый главный вопрос как мне данные из файла .json взять, так что бы я их мог вставить в DOM?

Добавлено через 4 часа 37 минут
Все разобрался в общих чертах.

@Hikari · 30.01.2016, 15:54

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

как мне данные из файла .json взять, так что бы я их мог вставить в DOM?

Я использую для этого eval(<Тут текст JSON>).
Только в текст еще приписую имя переменной. А потом по этому имени получаю иерархию массивов и объектов. Т.е. Дальше в цикле.

@notsliva · 30.01.2016, 16:02

https://github.com/douglascrockford/JSON-js, конкретно json2 весьма прост в использовании

JavaScript
1
var data = JSON.parse(text);

@Nameless One · 30.01.2016, 17:20

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

Я использую для этого eval(<Тут текст JSON>).

Но почему не JSON.parse?

@InFuz · 30.01.2016, 18:56 **[ТС]**

Такой вопросик еще появился, если мне нужно брать данные из двух разный json документов нужно еще раз это все дублировать

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'json/posts.json', true);
 
      xhr.onreadystatechange = function() {
        if (xhr.readyState != 4) return;
        if (xhr.status != 0) {
          // обработать ошибку
          alert(xhr.status + ': ' + xhr.statusText);
        } else {
          try {
            var posts = JSON.parse(xhr.responseText);
          } catch (e) {
            alert("Некорректный ответ " + e.message);
          }
        }

или можно как то сразу два документа open и в var posts записать один массив из posts.json, а к примеру var users другой массив из другого документа.

@Nameless One · 30.01.2016, 19:11

Можно, напиши функцию, которая будет выполнять запрос, и вызывай её с разными параметрами.

Псевдокод:

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
function getJson(res, done) {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', `json/${res}.json`, true)
  
  xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;
    if (xhr.status != 0) {
      return done(new Error(`${xhr.statusText}: ${xhr.status}`))
    }
 
    try {
      const response = JSON.parse(xhr.responseText)
      return done(null, response)
    } catch (e) {
      return done(e)
    }
  }
}
 
[...]
 
let posts, users
 
// handle errors if necessary
getJson('posts', (_err, response) => {
  posts = response
})
 
getJson('users', (_err, response) => {
  users = response
})

Можно ещё через Promise замутить.

@Hikari · 30.01.2016, 20:19

Сообщение от Nameless One

Но почему не JSON.parse?

Я о нем слышу впервые...
Честно честно

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@scio me nescire 123 / 62 / 32 Регистрация: 10.01.2014 Сообщений: 241
	30.01.2016, 00:50
	del 0

@notsliva 15 / 15 / 7 Регистрация: 25.06.2012 Сообщений: 95
	30.01.2016, 05:11
	Т.е. Вы хотите получить доступ из браузера к локальному файлу на компьютере, рядом с html-страницей? 0

@InFuz 0 / 0 / 0 Регистрация: 27.09.2015 Сообщений: 4
	30.01.2016, 15:46 [ТС]
	Собственно да. Но самый главный вопрос как мне данные из файла .json взять, так что бы я их мог вставить в DOM? Добавлено через 4 часа 37 минут Все разобрался в общих чертах. 0

Как данные из .json вставить в новый объект в HTML. [AJAX]

Решение