Задать вопрос
@Xonezz
Обучаюсь веб разработке
javascript

Как распарсить возвращаемые данные JSON?

Есть следующий код:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Find IP</title>
  </head>
  <body>
    <div class="main-page">
      <div class="content-conatainer">
        <h1>Определить местоположение</h1>
        <div class="data-input">
          <input type="text" id= "find" class="input-text" name="ip" value="" />
          <input type="submit" class="input-button" value="Проверить" />
        </div>
      </div>
    </div>
    <script src="/index.js"></script>
  </body>
</html>

var url = "https://suggestions.dadata.ru/suggestions/api/4_1/rs/iplocate/address?ip=";
var token = "xxx";
const query = document.getElementById('find').value;
console.log(query);

var options = {
    method: "GET",
    mode: "cors",
    headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "Authorization": "Token " + token
    }
}

fetch(url + query, options)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log("error", error));

Как сделасть так чтобы из получаемого ответа выводить в HTML:
Страна:
Регион:
Город:
  • Вопрос задан
  • 351 просмотр
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Для начала нужно заменить .then(response => response.text()) на .then(response => response.json()). И потом работать с result как с обычным объектом.
Ответ написан
Комментировать
Комментировать
sergiks
@sergiks Куратор тега JavaScript
♬♬
см. формат ответа в документации
-.then(response => response.text())
-.then(result => console.log(result))
+.then(response => response.json())
+.then(({ location }) => {
+  if (!location) return; // не нашлось
+  const { data } = location;
+  const { country, region_with_type, city_with_type } = data;
+  // теперь их куда-то вставить в разметку
+})
Ответ написан
7 комментариев
7 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 420 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сверстать страницы
07 февр. 2025, в 10:54
1500 руб./за проект
Нужна консультация по работе с API
07 февр. 2025, в 09:58
1000 руб./за проект
Телеграм бот для автоматизации генерации текста с ChatGPT-o1
07 февр. 2025, в 09:55
6000 руб./за проект
Ещё заказы