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

Question

[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 который может работать с объектами, но как то не хочется тянуть библиотеку ради одной функции
Подскажите как справится с задачей пожалуйста.

Comments

[alex]

может лучше переделать структуру firebase и возвращать массив, а не объект?

[AndrewsN93]

Alex, Как это сделать подскажите пожалуйста.

Answer 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>
  )
})

Не забыть подключить полифил для старых браузеров.

Comments

[yanis_kondakov]

Если важны ключи и нужны сами значения, то можно использовать:
Object.entries(json).map(([key, value]) => ...)

[AndrewsN93]

Вопрос был о том как ВЫВЕСТИ ДАННЫЕ ИЗ ОБЪЕКТА В REACT КОМПОНЕНТЕ В РАЗМЕТКУ, а то на что Вы переименовали вопрос не совсем подходит, поэтому прошу вернуть назад изначально поставленный вопрос.

[Алексей Уколов]

AndrewsN93, ну так формулируйте вопрос нормально; "что то как то не выходит" - это не описание проблемы. При чём тут тогда map и for? Что конкретно у вас вызывает сложности? Вы документацию читали?
Добавил в ответ пример рендеринга.

[AndrewsN93]

Алексей Уколов, Спасибо Вам за помощь, да действительно вопрос поставил не совсем корректно можно по разному его понять.

Answer 2

[yanis_kondakov]

Object.entries
Object.keys
Object.values
for...in

Answer 3

[Александр Сырица]

Вынесите функцию, которая делает url запрос отдельным методом и вызывать его в workOne и workTwo.
Другой вариант - загрузить данные с сервера один раз, а поиск сделать на стороне клиента.

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

Answer 4

[alexhovansky]

Начните с изучения JS, а потом уже и React осваивайте

Object.keys(YOUR_OBJECT) - получаете массив ключей, к свойствам объекта обращаетесь по ключу, если речь про JSX, то так можно:

{
  Object.keys(YOUR_OBJECT).map(key => {
    return (
      <div key={key}>
        {YOUR_OBJECT[key].description}
      </div>
    );
  })
}