Возврат объекта, который находится внутри массива другого объекта

Я подключаюсь к API и возвращаю некоторые данные на экран, используя следующее:

return (

    <>

        {Object.values(items).map((item, index) => {
        return <pre>{JSON.stringify(item, null, 2)}</pre>

    </>

})}

Это возвращает объект во внешний интерфейс, который выглядит следующим образом.

[
  {
    "type": "player",
    "id": "account.ac12c743e8044d42a6eafeffa2c3a8cf",
    "attributes": {
      "name": "JohnnyUtah",
      "stats": null,
      "titleId": "pubg",
      "shardId": "stadia",
      "patchVersion": ""
  },
  "relationships": {
      "assets": {
      "data": []
  },
  "matches": {
      "data": [
      {
        "type": "match",
        "id": "473019a4-fe3b-420a-b00e-b99ff2cd8c73"

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

"id": "account.ac12c743e8044d42a6eafeffa2c3a8cf"

Однако у меня есть объект с массивом объектов внутри него, и я не знаю, как получить к нему доступ.

Я знаком с функцией отображения массива, которую, как мне кажется, мне нужно использовать, но я не знаю, как попасть внутрь этого массива в возвращаемом объекте.

Поэтому я изо всех сил пытаюсь понять, как я получаю это значение.


Добавление полного кода, поскольку это может помочь прояснить ситуацию:

import React, { useEffect, useState } from 'react'

function Player() {

  const [player,setPlayer] = useState('JohnnyUtah')
  const [items,setItems] = useState([])

  useEffect(() => {

    const apiKey = "key";

    const options = {
      "headers": {
        "Accept": "application/vnd.api+json",
        "Authorization": `Bearer ${apiKey}`
      }
    }

    fetch(`https://api.pubg.com/shards/stadia/players?filter[playerNames]=${player}`, options)
    .then(response => response.json())
    .then(json => setItems(json))

  }, [player])

  return (
    
    <>
      <div>
        <button onClick = {() => setplayer('JohnnyUtah')}>JohnnyUtah</button>
        <button onClick = {() => setplayer('Binder')}>Binder</button>
        <button onClick = {() => setplayer('MartinSheehanUK')}>MartinSheehanUK</button>
      </div>
      <h1>{player}</h1>

      <div>

      <h2>This shows all</h2>
      {data.map((item) => (
          <li key = {item.id}>{item.id}</li>
        ))}
      </div>
      
      <div>
      <h2>This shows only one</h2>
      {data[0].id}
      </div>

    </>

  ) 

};

export default Player

Просто показываю самую последнюю версию моего кода, которая до сих пор не возвращает мне никаких результатов:

import React, { useEffect, useState } from 'react'

function Player() {

  const [player,setPlayer] = useState('JohnnyUtah')
  const [items,setItems] = useState([])

  useEffect(() => {

    const apiKey = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI5MTI0M2U5MC1iMjk5LTAxM2EtN2Q5ZC0xNzRhYzM1YTM1ZGYiLCJpc3MiOiJnYW1lbG9ja2VyIiwiaWF0IjoxNjUyMTkyMTI4LCJwdWIiOiJibHVlaG9sZSIsInRpdGxlIjoicHViZyIsImFwcCI6InB1YnJnLWxlYWRlcmJvIn0.veCjNiRtCzchj2Gli-aZt_0YQjtMvey3io-UUDa0zpQ";

    const options = {
      "headers": {
        "Accept": "application/vnd.api+json",
        "Authorization": `Bearer ${apiKey}`
      }
    }

    fetch(`https://api.pubg.com/shards/stadia/players?filter[playerNames]=${player}`, options)
    .then(response => response.json())
    .then(json => setItems(json))

  }, [player])

  return (
    
    <>
      <div>
        <button onClick = {() => setPlayer('JohnnyUtah')}>JohnnyUtah</button>
        <button onClick = {() => setPlayer('Binder')}>Binder</button>
        <button onClick = {() => setPlayer('MartinSheehanUK')}>MartinSheehanUK</button>
      </div>
      <h1>{player}</h1>

      {items !==undefined && items.length>0 ? items.map((item) => (
        <li key = {item.id}>{item.id}</li>
      )): <div>No result found</div>} 
 

    </>

  ) 

};

Почему Object.values? Почему бы не просто items[0].id за первое или items.map(item => item.id) за всех? Вы не показали объект с массивом объектов в нем, вы просто показали массив объектов.

CherryDT 21.11.2022 12:13

Вы хотите получить идентификатор только первого элемента? В этом случае вы можете использовать items[0].id, но если вы хотите получить все, вы можете использовать map для перебора всех объектов массива и получения идентификатора как item.id

Nijat Mursali 21.11.2022 12:16

Также было бы неплохо поделиться используемым вами API, чтобы я мог сгенерировать для него сценарий.

Nijat Mursali 21.11.2022 12:17

Спасибо @NijatMursali, API можно найти здесь: documentation.pubg.com/en/introduction.html

Johnny 21.11.2022 13:44

Я посмотрю, а вы хотите получить идентификатор только одного объекта или всех?

Nijat Mursali 21.11.2022 13:57

@NijatMursali оба были бы великолепны. Я думаю, что если бы это был просто объект или просто массив, я был бы в порядке, но возврат объекта, содержащего массив объектов, меня сбивает с толку. Спасибо.

Johnny 21.11.2022 15:12

Пожалуйста, проверьте мой ответ. Я уверен, что это то, что вы ищете.

Nijat Mursali 21.11.2022 15:13
[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
7
72
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Назначьте строковые данные переменной, а затем вы можете преобразовать строковые данные JSON в данные синтаксического анализа, используя это: JSON.parse, затем извлеките данные:

Ниже приведен пример:

const obj = {name: "John", age: "30", city: "New York"};

const myJSON = JSON.stringify(obj);
var c = JSON.parse(myJSON);

console.info(c.name);

Пожалуйста, попробуйте и дайте мне знать, если вы обнаружите какую-либо проблему

Почему именно вы меняете возраст на string, стрингифицируете объект и снова меняете его на json?

Nijat Mursali 21.11.2022 12:28

Ничего, это лишний код, я его удалил.

Kairav Thakar 21.11.2022 12:32
Ответ принят как подходящий

Вы можете получить все id из массива таких объектов, как

const data = [
  {
    type: "player",
    id: "account.ac12c743e8044d42a6eafeffa2c3a8cf",
    attributes: {
      name: "Steve1989",
      stats: null,
      titleId: "pubg",
      shardId: "stadia",
      patchVersion: ""
    },
    relationships: {
      assets: {
        data: []
      }
    }

    //some other values
  },
  {
    type: "player",
    id: "account.bc24c743e8044d42a6eafeffa2c3a8cf",
    attributes: {
      name: "John133",
      stats: null,
      titleId: "pubg",
      shardId: "stadia",
      patchVersion: ""
    },
    relationships: {
      assets: {
        data: []
      }
    }

    //some other values
  }
];


const App = props => (
    <div className = "App">
    <div>
    <h2>This shows all</h2>
    {data.map((item) => (
        <li key = {item.id}>{item.id}</li>
      ))}
    </div>
    
    <div>
    <h2>This shows only one</h2>
    {data[0].id}
    </div>
      
    </div>
);

// Render it
ReactDOM.render(
    <App />,
    document.getElementById("root")
);
<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Я также приложил решение для получения только определенного индекса.

Обновлять: Проблема возникает с вашим массивом, где вы должны установить setItems(json.data). Вам также необходимо проверить, определен ли ваш массив.

Полный код:

function Player() {
const [player,setPlayer] = useState('JohnnyUtah')
const [items,setItems] = useState([])

  useEffect(() => {

    const apiKey = "your_key";

    const options = {
      "headers": {
        "Accept": "application/vnd.api+json",
        "Authorization": `Bearer ${apiKey}`
      }
    }

    fetch(`https://api.pubg.com/shards/stadia/players?filter[playerNames]=${player}`, options)
    .then(response => response.json())
    .then(json => setItems(json.data))

  }, [player])
  return (
    <>
    <div>
      <button onClick = {() => setplayer('JohnnyUtah')}>JohnnyUtah</button>
        <button onClick = {() => setplayer('Binder')}>Binder</button>
        <button onClick = {() => setplayer('MartinSheehanUK')}>MartinSheehanUK</button>
    </div>
    <div>
    {items !=undefined && items.length>0 ? items.map((item) => (
        <li key = {item.id}>{item.id}</li>
      )): <div>No result found</div>} 
    </div>
  </>
  );
}

Все еще не могу заставить это работать, так как получаю следующую ошибку > Uncaught ReferenceError: данные не определены, что выглядит так, как будто я пытаюсь работать с массивом, когда у меня действительно есть объект. Включил полный код на случай, если это поможет.

Johnny 21.11.2022 15:34
data — это ваш массив items. Пожалуйста, замените его и повторите попытку. Я также обновлю свой код, если он не работает
Nijat Mursali 21.11.2022 15:39

Теперь я получаю эту ошибку: Player.js: 44 Uncaught TypeError: Не удается прочитать свойства неопределенного (чтение «id»)

Johnny 21.11.2022 15:48

Я обновил код и протестировал его сам. Теперь он должен работать нормально. Просто скопируйте и замените код внутри вашего компонента Player. Дайте мне знать, если это работает.

Nijat Mursali 21.11.2022 16:26

Он не возвращает никакого значения, если вы выберете платформу stadia, я выбрал steam. Я также тестировал в самом API, в stadia у вас нет этих имен.

Nijat Mursali 21.11.2022 16:31

Спасибо, Ниджат, обновил эти имена пользователей до совместимых со Stadia. Сейчас я работаю с JohnnyUtah. Код больше не показывает никаких ошибок, но всегда возвращает сообщение «Результат не найден»?

Johnny 21.11.2022 16:55

Вы уверены, что изменили steam на stadia в ссылке? Это работает в моем случае и возвращает идентификатор.

Nijat Mursali 21.11.2022 17:15

Надеюсь, мое решение вам помогло. Если это работает, примите это как принятый ответ. Спасибо.

Nijat Mursali 21.11.2022 17:16

Давайте продолжим обсуждение в чате.

Johnny 21.11.2022 18:18

Ты забыл поменять .then(json => setItems(json.data)), просто поменяй setItems(json) на setItems(json.data)

Nijat Mursali 21.11.2022 18:55

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