Как достучаться тут до объекта?

Question

[Nikita Shchypylov]

Какой-то проклятый круг. Обожаю спотыкаться на такой фигне.
Отдаётся мне такой объект :

const content =  components ? (
        Object.keys(components).forEach(function(key) {
          console.log(components[key]);
        })
    ) : (
      <div>adsfasdfdsafds</div>
    )

Как правильно вывести тут значения? components[key].name - не работает, components[key][0].name - тоже

PS:

const content =  components ? (
        Object.keys(components).forEach(function(key) {
          Object.keys(components[key]).forEach(function(key_1) {
            console.log('---', components[key][key_1].name);
          })    
        })
    ) : (
      <div>adsfasdfdsafds</div>
    )

Это вариант работает. Можно ли упростить этой вариант?

Answer 1

[aloky]

Мб так)
components[key[0]].name

Comments

[Nikita Shchypylov]

Не работает
Дополнил вопрос

Answer 2

[Виталий]

for(let key in object){
    console.log(object[key]);
}

Comments

[Nikita Shchypylov]

Не могу его использовать в тернарном операторе

[Виталий]

let result = [];
if(components.length)
for(let key in components){
    result.push(components[key]);
}
const content = result.length ? result : (
      <div>adsfasdfdsafds</div>
    )

чет вроде

[Виталий]

а вообще я тут подумал , что на скрине то у тебя иная структура [{},{},{}]
тогда все может быть иначе

const content =  components ? <ul>{components.map((component, key)=><li key={key}>component.name</li>)}</ul> : <div>wdwqdqwd</div>

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

[profesor08]

Nikita Shchypylov, Прекращай говнокодить и оберни в функцию, которая будет обрабатывать твой объект любым удобным способом, и вставляй ее в свой тернарный оператор.

[Виталий]

profesor08, пацану сперва надо понять структуру своих объектов.... потом уже обертки генерить

[Nikita Shchypylov]

Виталий, нельзя использовать map с объектом

[Nikita Shchypylov]

Виталий,

renderList = () => {
    let components = this.props.components;
    return Object.keys(components).forEach(function (key) {
      Object.keys(components[key]).forEach(function (key_1) {
        return (
            <div>
              <div className="comp">{components[key][key_1].comp}</div>
              <div className="name">{components[key][key_1].name}</div>
            </div>
        )
      })
    })
  };

<div>{this.renderList()}</div>

Это по-идее должно работать, но почему-то не создаются div'ы. console.log() работает, а дивы нет. Почему, как думаешь?

[Виталий]

Nikita Shchypylov, ты не пробуй ввести все что тебе пишут, а читай целиком текст, тогда будет яснее. Я в том комментарии предположил, что ты имеешь дело с массивом объектов. Но я еще раз подчеркиваю, все твои проблемы уйдутт , когда ты будешь понимать свою структуру объекта, по сути в js всего два типа циклов по массивам и объектам, их нужно применять там, где нужно.

[Nikita Shchypylov]

Виталий, Шарю и читаю. Скинул выше пример

[Виталий]

Nikita Shchypylov,forEach((item,KEY)=><div key={KEY}>{item}</div>);
акцент на KEY

[Nikita Shchypylov]

Виталий, Где именно? В первой или второй петле?

[Виталий]

Nikita Shchypylov, ну вопрос не в числе циклов, а в выводе же, потому кей может быть в принципеkey={++KEY} где до циклов объявлено KEY=0;

[Nikita Shchypylov]

Виталий, Как раз в числе, потому что с первой я получаю объект с объектом. Во втором - свойства объекта

[Виталий]

Nikita Shchypylov,

renderList = () => {
let KEY =0;
    let components = this.props.components;
    return Object.keys(components).forEach(function (key) {
      Object.keys(components[key]).forEach(function (key_1) {
        return (
            <div key={++KEY}>
              <div className="comp">{components[key][key_1].comp}</div>
              <div className="name">{components[key][key_1].name}</div>
            </div>
        )
      })
    })
  };

кажется без пожувать не выйдет, ну попробуй так