@AndrewsN93

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

Всем привет. Осваиваю 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 который может работать с объектами, но как то не хочется тянуть библиотеку ради одной функции
Подскажите как справится с задачей пожалуйста.
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
Если ключи не важны:
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>
  )
})


Не забыть подключить полифил для старых браузеров.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
asyryssa
@asyryssa
IT-журналист. 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>
    );
  })
}
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
CS Money Санкт-Петербург
от 120 000 до 150 000 руб.
Digital Sharks Казань
от 60 000 до 65 000 руб.
20 янв. 2019, в 00:12
16000 руб./за проект
19 янв. 2019, в 23:33
110000 руб./за проект