Как получить значение вложенного объекта с неизвестными путями?

Question

Изначально я рендерил компоненты, используя этот код для сопоставления массива объектов ([{}, {}, {}]):

let todoComponents = allTodos.map(item => <Todos key={item.id} item={item} handleChange={handleChange}/>)

Однако , это не работает в отдельном проекте, где я получаю данные из Firebase с другой структурой данных. В нем каждый объект имеет уникальное имя.

[{
  "-M8CpcbvDriZpw4sc4IW" : {
    "completed" : false,
    "id" : "-M8CpcbvDriZpw4sc4IW",
    "text" : "Get Comic Book"
  },
  "-M8Cpku0PCNu0_Eajtuu" : {
    "completed" : false,
    "id" : "-M8Cpku0PCNu0_Eajtuu",
    "text" : "Take out Trash"
  }
}]

Проблема в том, что .map не знает, где искать значение item. В первом примере .map искал массив -> объект (со значениями). Это не работает для данных из firebase, потому что массив -> объект -> объект (со значениями). Как я могу сказать .map пропустить лишний объект, не зная точного пути во вложенном объекте?

Answer 1

Если целью является преобразование:

[{
  "-M8CpcbvDriZpw4sc4IW" : {
    "completed" : false,
    "id" : "-M8CpcbvDriZpw4sc4IW",
    "text" : "Get Comic Book"
  },
  "-M8Cpku0PCNu0_Eajtuu" : {
    "completed" : false,
    "id" : "-M8Cpku0PCNu0_Eajtuu",
    "text" : "Take out Trash"
  }
}]

Кому:

[{
  "completed" : false,
  "id" : "-M8CpcbvDriZpw4sc4IW",
  "text" : "Get Comic Book"
}, {
  "completed" : false,
  "id" : "-M8Cpku0PCNu0_Eajtuu",
  "text" : "Take out Trash"
}]

Вы можете сделать это с помощью комбинации flatMap и Object.values():

allTodos = allTodos.flatMap(todos => Object.values(todos));

Или, если allTodos всегда содержит один объект с задачами, вы можете сделать:

allTodos = Object.values(allTodos[0]);

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

let todoComponents = allTodos.map(item => <Todos key={item.id} item={item} handleChange={handleChange}/>)

Answer 2

Если вы вызываете объект, полученный от firebase, скажем, data, тогда:

const obj = data[0]; // i am assuming there is only one object in the array
const allTodos = Object.values(obj); // allTodos is now an array of todos and you can use your original code

Answer 3

Попробуйте это

const data = [{
  "-M8CpcbvDriZpw4sc4IW": {
    "completed": false,
    "id": "-M8CpcbvDriZpw4sc4IW",
    "text": "Get Comic Book"
  },
  "-M8Cpku0PCNu0_Eajtuu": {
    "completed": false,
    "id": "-M8Cpku0PCNu0_Eajtuu",
    "text": "Take out Trash"
  }
}];

const todoList = [];
Object.keys(data[0]).forEach( key => todoList.push(data[0][key]));
console.log(todoList)

Answer 4

Если поможет!

let data = [{
  "-M8CpcbvDriZpw4sc4IW": {
    "completed": false,
    "id": "-M8CpcbvDriZpw4sc4IW",
    "text": "Get Comic Book"
  },
  "-M8Cpku0PCNu0_Eajtuu": {
    "completed": false,
    "id": "-M8Cpku0PCNu0_Eajtuu",
    "text": "Take out Trash"
  }
}]

data.map(ele => {
   let keys = Object.keys(ele);
   
   keys.forEach(key => {
    console.log("item is", ele[key])
   })
});