Как вывести некоторые данные из файла json на страницу html?

@Siurendy · Регистрация: 07.06.2016

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

Как с помощью JavaScript вывести некоторые данные из файла json на страницу html ?

Нужно вывести данные "city", "isp" и "query".

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
   "businessName" : "",
   "businessWebsite" : "",
   "city" : "Naberezhnye Chelny",
   "continent" : "Europe",
   "country" : "Russia",
   "countryCode" : "RU",
   "ipName" : "91x144x155x197.static-business.chelny.ertelecom.ru",
   "ipType" : "Residential",
   "isp" : "JSC 'ER-Telecom Holding'",
   "lat" : "55.72545",
   "lon" : "52.41122",
   "org" : "JSC 'ER-Telecom Holding'",
   "query" : "91.144.155.197",
   "region" : "Tatarstan Republic",
   "status" : "success"
}

https://extreme-ip-lookup.com/json

@Halmakari · 24.07.2019, 22:30

Для того чтобы получить данные, нужно сделать http запрос

JavaScript
1
2
3
4
5
6
7
8
9
10
let xhr = new XMLHttpRequest();
let url = 'https://extreme-ip-lookup.com/json';
xhr.open("GET", url, false);
 
xhr.send();
 
if (xhr.status == 200) {
  let data = JSON.parse(xhr.responseText);
  // дальше бери данные из объекта и вставляй на страницу
}

@Mr_Sergo · 25.07.2019, 00:41

Siurendy,

http://some-test.onlinewebshop... ookup.com/

HTML5
1
<div id="res"></div>

JavaScript
1
2
3
4
5
6
7
8
9
(async ()=> {
    let answer = await fetch('https://extreme-ip-lookup.com/json'), data = await answer.json();
 
    document.querySelector('#res').insertAdjacentHTML('afterBegin', `
        city : ${data.city} <br>
        isp : ${data.isp} <br>
        query : ${data.query}
    `);
})();

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию 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. Реализовать контроль заполнения реквизита. . .