ReactJS: mise à jour des accessoires - transformer un tableau de 17 objets de 2 paires clé: valeur en une avec 3 clés: paires de valeurs

Question

Je suis relativement nouveau/débutant en programmation frontale mais j'aide quelqu'un d'autre à créer une interface web pour une application. Pour la plupart, j'ai appris assez pour avoir une idée de base de ce que tout fait, bien que j'essaie d'ajouter une fonctionnalité qui est un peu difficile. En bref, j'ai deux aggros (en utilisant reactJS). Le principal contient des données et peut être filtré, et j'essaye d'en faire un second qui non seulement conserve les noms de colonnes du principal mais aussi liste dynamiquement les filtres qui ont été appliqués. Cette deuxième grille est comme une grille d'aide/assistant pour l'utilisateur

Ma compréhension m'a aidé à mi-chemin à travers la mise en œuvre de ce point (j'ai réussi à remplir la deuxième ag-grille avec tous les en-têtes de colonne de la grille principale).

Les données des en-têtes de colonne ont été stockées et récupérées à partir des accessoires. quelque chose de similaire à:

rowData: this.props.report.view.columns

si vous exécutez console.log (this.props.report.view.columns) (J'utilise la console de développeur chrome outils), vous verrez un tableau de 17 objets qui contiennent des informations sur les colonnes. Structure ci-dessous:

report: Object 
| 
--view: Object 
    | 
    --columns: Array(17) 
    | 
    --0: Object 
    | | 
    | -- field: "testColumn" 
    |  headerName: "testColumn" 
    | 
    --1: Object 
    --2: Object 
    --3: Object 
. 
. 
. 
    --16: Object 

Je vais juste dire cela ressemble à un tableau de 17 objets, tenant chacun deux couples clé: valeur. Ce que je veux faire est d'ajouter une troisième paire de valeur clé

J'ai un autre accessoire qui donne des paires clé: valeur de seulement les colonnes qui ont des filtres appliqués (ie columnName: blah, filter: blahh où les noms de colonnes sont stockés sous un différent nom de clé).

le code pseudo Je prévois de mettre en oeuvre va quelque chose comme ceci:

For EACH element in the 17 Object array (this.props.report.view.columns) 
    if headername = columnName (i.e. from column from filter prop) 
THEN 
    add new key:value pair headerName:filter; to that object element 
ELSE 
    add new key:value pair headerName:''; (an empty value) to that object 

Ce que je vais finir avec change ce tableau 17 objet de 2 paires clé: valeur, à un tableau de 17 objet avec 3 clés paires de valeurs Est-ce que quelque chose comme ça est possible? Si oui, puis-je obtenir des conseils? Je suis un peu inquiet que tout le plan que j'ai utilisé est faux. Mon collègue aîné a suggéré que j'utilisais un plan différent en utilisant des rappels, mais je ne voyais pas comment cela serait possible sans changements de code majeurs (c'est pourquoi je suis resté fidèle à mon intuition)

Answer 1

Avec la méthode map? https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const data = [ 
 
    {a: 7, b: 0}, 
 
    {a: 4, b: 7}, 
 
    {a: 9, b: 6}, 
 
    {a: 1, b: 7}, 
 
]; 
 

 
const newData = data.map(currObj => ({...currObj, c: 0})); 
 

 
console.log(newData);