1
votes

Comment obtenir la valeur d'un objet imbriqué avec des chemins inconnus?

À l'origine, je rendais des composants en utilisant ce code pour mapper un tableau d'objets ( [{}, {}, {}] ):

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

Cependant, cela ne fonctionne pas sur un projet séparé où j'obtiens des données de Firebase avec une structure de données différente. Dans celui-ci, chaque objet a un nom unique.

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

Le problème est que .map ne sait pas où chercher la valeur de article . Dans le premier exemple, .map a recherché un objet tableau -> (avec des valeurs). Cela ne fonctionne pas pour les données de Firebase car tableau -> objet -> objet (avec des valeurs). Comment puis-je dire à .map d'ignorer l'objet supplémentaire sans connaître le chemin exact dans l'objet imbriqué?

javascript object arrays

0 commentaires

4 Réponses :

0
votes

Si cela aide!

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])
   })
});

0 commentaires

1
votes

Si vous appelez l'objet que vous avez obtenu de Firebase, disons data alors:

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

0 commentaires

0
votes

Essayez ceci

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)

0 commentaires

1
votes

Si l'intention est de convertir:

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

To:

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

Vous pouvez le faire avec une combinaison de flatMap et Object.values () :

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

Ou si allTodos contient toujours un seul objet avec des todos que vous pouvez faire:

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

Après avoir converti la structure de données, vous pouvez puis exécutez votre déclaration:

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

3 commentaires

Comment le reconvertiriez-vous en un tableau non aplati?

En ne l'aplatissant pas en premier lieu. Utilisez map au lieu de flatMap pour conserver le tableau imbriqué.

J'ai aplati le tableau car .map n'a pas pu obtenir la valeur de la requête, mais maintenant je ne peux pas utiliser la méthode .set de Firebase pour mettre à jour ma base de données car elle n'utilise pas la nouvelle structure de données.