Как я могу получить определенный массив из данных JSON и отобразить его?

Во-первых, приношу извинения, так как я новичок в получении данных из API и пытаюсь учиться.

Мне нужно получить «имя», «возраст» и «телефон» из «id» 1 из «is» и отобразить его при нажатии на кнопку. Это мой файл javascript-fetch-api.js:

Я не уверен, как получить только из id 1 "is"

const events = [{
  "id": 1,
  "language": {
    "is": {
      "name": "Ali Sakaroğlu",
      "age": 27,
      "phone": "05368218685",
      "tags": [
        "Gallery",
        "STAK",
        "Gallery Julius",
        "mom",
        "young",
        "lorem",
        "ipsum",
        "show",
        "born",
        "worm",
        "dorm",
        "norm",
        "dlla"
      ]
    },
    "en": {
      "name": "Ali Sakaroğlus",
      "age": 27,
      "phone": "05368218685",
      "tags": [
        "Gallery",
        "STAK",
        "Gallery Julius",
        "mom",
        "young",
        "lorem",
        "ipsum",
        "show",
        "born",
        "worm",
        "dorm",
        "norm",
        "dlla"
      ]
    }
  }
}]


let output = '<ul>';
events.forEach((event) => {
  output += `<li>${event.id})  Name: ${event.name} - Age: ${event.age} - Phone: ${event.phone} </li> `;
});

output += '</ul> <hr>';
document.getElementById('output').innerHTML += output;
<div id = "output"></div>

Я сделал вам минимальный воспроизводимый пример так как выборка явно сработала

mplungjan 19.11.2022 22:46
[JS за 1 час] - 9. Асинхронный
[JS за 1 час] - 9. Асинхронный
JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...
Подъем в javascript
Подъем в javascript
Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
0
1
82
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Внутри события у вас есть идентификатор и язык, а не имя, возраст и телефон. если вы хотите получить имя, возраст и телефон от «есть», вы должны ввести:

 event.language.is.age
 event.language.is.name
 event.language.is.phone

Спасибо за ответ. Я попытался изменить его, но теперь я получаю это сообщение об ошибке в консоли; Отклонение необработанного обещания: SyntaxError: Строка не соответствует ожидаемому шаблону. promiseEmptyOnRejected

reidar ja 19.11.2022 22:58

Я проверил, и это работает. посмотреть можно здесь stackblitz.com/edit/web-platform-341tym?file=script.js

Georgemff 19.11.2022 23:07

Насколько я вижу, это решение устраняет проблему с предоставленным вами кодом и отвечает на ваш вопрос. Если у вас есть другая проблема с вашим кодом, которая выходит за рамки этого вопроса, вам следует опубликовать отдельный вопрос. Пожалуйста, постарайтесь не изменять заданный вопрос в том же сообщении, так как нам будет труднее ответить, а читателям будет труднее получить ценность.

damonholden 19.11.2022 23:09

Если вы нажмете редактировать, а затем [<>], вы можете опубликовать актуальное решение здесь, а не на странице, которая может исчезнуть.

mplungjan 20.11.2022 08:33

@mplungjan вопрос был «как получить имя, возраст и телефон от« есть »», и я опубликовал ответ на этот вопрос. У автора была другая ошибка, и он не имеет никакого отношения к этому вопросу.

Georgemff 20.11.2022 12:52

Вы ВСЕ ЕЩЕ можете опубликовать код ответа здесь, чтобы другие могли его увидеть.

mplungjan 20.11.2022 14:35

Вы можете развернуть объект следующим образом, чтобы получить name и т. д. из свойства is:

      output += `<li>${event.id})  Name: ${event.is.name} - Age: ${event.is.age} - Phone: ${event.is.phone} </li> `;

Пожалуйста, предоставьте мне ваш прямой эфир. Я помогу вам найти лучшее решение для вашего запроса, но сейчас я добавляю решение, похожее на вашу проблему.

live code: https://jsfiddle.net/cu2q9dzm/

function getJson() {
  fetch('https://raw.githubusercontent.com/FEND16/movie-json-data/master/json/movies-in-theaters.json').then((response) => response.json())
    .then((data) => data.forEach(data => {
      console.info("id: ", data.id, "year: ", data.year, "title: ", data.title);
    }));
}
getJson();

Если вы нажмете редактировать, а затем [<>], вы можете разместить код здесь

mplungjan 20.11.2022 08:30

Другие вопросы по теме