Задать вопрос
@AndrewsN93
javascript

Как проитерировать объект?

Всем привет. Осваиваю React, столкнулся с трудностью:
Из Firebase получил объект -
{
    "workOne": {
        "description": "hello worldl",
        "name": "hello",
        "url": "https://picsum.photos/300"
    },
    "workTwo": {
        "description": "heldlakjf;lakj ldkfja;ldfkja;ldkfjad fasfja;",
        "name ": "hello2",
        "url": "https://picsum.photos/400"
    }
}

И хочу пройтись по нему, и вывести данные из него в компоненте, но что то как то не выходит.
Пробовал map() - не работает с object
циклом for что то не пойму как взаимодействовать с реактом.
Нашел про lodash и ее map который может работать с объектами, но как то не хочется тянуть библиотеку ради одной функции
Подскажите как справится с задачей пожалуйста.
  • Вопрос задан
  • 622 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Если ключи не важны:
Object.value(json).map((item) => (
  <div key={item.url}>
    <strong>{item.name}</strong>
    <span>{item.description}</span>
    <img src={item.url} />
  </div>
))


Если ключи важны:
Object.keys(json).map((key) => {
  const item = json[key];

  return (
    <div key={item.url}>
      <strong>{item.name}</strong>
      <span>{item.description}</span>
      <img src={item.url} />
    </div>
  )
})


Не забыть подключить полифил для старых браузеров.
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ответы на вопрос 3
yanis_kondakov
@yanis_kondakov
Object.entries
Object.keys
Object.values
for...in
Ответ написан
Комментировать
Комментировать
syryshka
@syryshka
Журналист. PR/SMM-менеджер. Фотограф
Вынесите функцию, которая делает url запрос отдельным методом и вызывать его в workOne и workTwo.
Другой вариант - загрузить данные с сервера один раз, а поиск сделать на стороне клиента.

Почитайте здесь, возможно сможете более глубже понять работу React
Ответ написан
Комментировать
Комментировать
@alexhovansky
Начните с изучения JS, а потом уже и React осваивайте

Object.keys(YOUR_OBJECT) - получаете массив ключей, к свойствам объекта обращаетесь по ключу, если речь про JSX, то так можно:
{
  Object.keys(YOUR_OBJECT).map(key => {
    return (
      <div key={key}>
        {YOUR_OBJECT[key].description}
      </div>
    );
  })
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы