Как вывести некоторые данные из файла 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}
    `);
})();

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

Опции темы