Форматирование объекта - .map удаляет мою первую строку

Question

Я изменяю данные объектов с помощью функции .map.

Исходный объект, значения которого я пытаюсь изменить, теряет свою первую строку, которая разрушает форматирование для меня.Я теряю только первую строку, я думаю, потому что она как-то не включена в мою функцию?

Объект:

graphData = {

"name": "Annual meetings",
  "engagementAreas": [{
    "id": "1",
    "engagementTypes": [{
        "name": "forestry",
        "engagements": []
      },
      {
        "name": "houses",
        "engagements": [{
          "name": "engagement1",
          "members": [{
              "id": "e334", "account": {
                  "id": "eefe" 
              },
            "position": {
              "id": "3434",
              "positionTitle": "Manager"
            }
          }]
        }]
      },
 {
  "name": "landscaping",
  "engagements": [{
    "name": "engagement1343",
    "members": [{
      "position": {
        "id": "4545",
        "positionTitle": "Senior Manager"

      }
      }]
     }]
    }
   ]
},

{
"name": "community days",
    "engagementTypes": [{
        "name": "skyscraping",
        "engagements": []
      },
      {
        "name": "tennis",
        "engagements": [{
          "name": "engagement346",
          "members": [{
              "id": "34", "account": {
                  "id": "3546" 
              },
            "position": {
              "id": "3999434",
              "positionTitle": "Ultime Manager"
            }
          }]
        }]
      },
 {
  "name": "Juicing",
  "engagements": [{
    "name": "347343",
    "members": [{
        "id": "4546", "account": {
            "id": "3545"
        },
      "position": {
        "id": "35006",
        "positionTitle": "Senior Ultimate Manager"

      }
    }]
}]
 }]
}]
}

Это функция, которую я использую для изменения полей данных (positionTitle)

   const a = realGraphData.engagementAreas.map((el, i) => {
        el.engagementTypes.forEach((et) => {
           et.engagements.forEach((eg) => {
              eg.members.forEach((mem) => {
                 mem.position.positionTitle = 'abc'

              });
           });
        });

        return el;
      })

Мой ожидаемый результат должен быть:

{
    "name": "Annual meetings",
    "engagementAreas": [{
        "id": "1",
        "engagementTypes": [{
            "name": "forestry",
            "engagements": []
        }, {
            "name": "houses",
            "engagements": [{
                "name": "engagement1",
                "members": [{
                    "id": "e334",
                    "account": {
                        "id": "eefe"
                    },
                    "position": {
                        "id": "3434",
                        "positionTitle": "abc"
                    }
                }]
            }]
        }, {
            "name": "landscaping",
            "engagements": [{
                "name": "engagement1343",
                "members": [{
                    "position": {
                        "id": "4545",
                        "positionTitle": "abc"
                    }
                }]
            }]
        }]
    }, {
        "name": "community days",
        "engagementTypes": [{
            "name": "skyscraping",
            "engagements": []
        }, {
            "name": "tennis",
            "engagements": [{
                "name": "engagement346",
                "members": [{
                    "id": "34",
                    "account": {
                        "id": "3546"
                    },
                    "position": {
                        "id": "3999434",
                        "positionTitle": "abc"
                    }
                }]
            }]
        }, {
            "name": "Juicing",
            "engagements": [{
                "name": "347343",
                "members": [{
                    "id": "4546",
                    "account": {
                        "id": "3545"
                    },
                    "position": {
                        "id": "35006",
                        "positionTitle": "abc"
                    }
                }]
            }]
        }]
    }]
}

Вместо этого он такой же, как и выше, только без начальной строки,

"name": "Annual meetings",
  "engagementAreas":

, поэтомуэто:

[{
    "id": "1",
    "engagementTypes": [{
        "name": "forestry",
        "engagements": []
    }, {
        "name": "houses",
        "engagements": [{
            "name": "engagement1",
            "members": [{
                "id": "e334",
                "account": {
                    "id": "eefe"
                },
                "position": {
                    "id": "3434",
                    "positionTitle": "abc"
                }
            }]
        }]
    }, {
        "name": "landscaping",
        "engagements": [{
            "name": "engagement1343",
            "members": [{
                "position": {
                    "id": "4545",
                    "positionTitle": "abc"
                }
            }]
        }]
    }]
}, {
    "name": "community days",
    "engagementTypes": [{
        "name": "skyscraping",
        "engagements": []
    }, {
        "name": "tennis",
        "engagements": [{
            "name": "engagement346",
            "members": [{
                "id": "34",
                "account": {
                    "id": "3546"
                },
                "position": {
                    "id": "3999434",
                    "positionTitle": "abc"
                }
            }]
        }]
    }, {
        "name": "Juicing",
        "engagements": [{
            "name": "347343",
            "members": [{
                "id": "4546",
                "account": {
                    "id": "3545"
                },
                "position": {
                    "id": "35006",
                    "positionTitle": "abc"
                }
            }]
        }]
    }]
}]

Answer 1

Карта возвращает массив результатов. Вы передаете это все внутри "обручальных зон". Вместо этого попробуйте только передать массив в вашу функцию и установить для части «engagementAreas» возвращаемое значение

Answer 2

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

const updatedGraphTable = { ...graphData,
  engagementAreas: graphData.engagementAreas.map(area => ({ ...area,
    engagementTypes: area.engagementTypes.map(type => ({ ...type,
        engagements: type.engagements.map(engagement => ({ ...engagement,
          members: engagement.members.map(member => ({ ...member,
            position: { ...member.position,
              positionTitle: 'abc'
            }
          }))
        }))}))
    }))
  };

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

const graphData = {
  "name": "Annual meetings",
  "engagementAreas": [{
      "id": "1",
      "engagementTypes": [{
          "name": "forestry",
          "engagements": []
        },
        {
          "name": "houses",
          "engagements": [{
            "name": "engagement1",
            "members": [{
              "id": "e334",
              "account": {
                "id": "eefe"
              },
              "position": {
                "id": "3434",
                "positionTitle": "Manager"
              }
            }]
          }]
        },
        {
          "name": "landscaping",
          "engagements": [{
            "name": "engagement1343",
            "members": [{
              "position": {
                "id": "4545",
                "positionTitle": "Senior Manager"

              }
            }]
          }]
        }
      ]
    },

    {
      "name": "community days",
      "engagementTypes": [{
          "name": "skyscraping",
          "engagements": []
        },
        {
          "name": "tennis",
          "engagements": [{
            "name": "engagement346",
            "members": [{
              "id": "34",
              "account": {
                "id": "3546"
              },
              "position": {
                "id": "3999434",
                "positionTitle": "Ultime Manager"
              }
            }]
          }]
        },
        {
          "name": "Juicing",
          "engagements": [{
            "name": "347343",
            "members": [{
              "id": "4546",
              "account": {
                "id": "3545"
              },
              "position": {
                "id": "35006",
                "positionTitle": "Senior Ultimate Manager"

              }
            }]
          }]
        }
      ]
    }
  ]
};

const updatedGraphTable = { ...graphData,
  engagementAreas: graphData.engagementAreas.map(area => ({ ...area,
    engagementTypes: area.engagementTypes.map(type => ({ ...type,
        engagements: type.engagements.map(engagement => ({ ...engagement,
          members: engagement.members.map(member => ({ ...member,
            position: { ...member.position,
              positionTitle: 'abc'
            }
          }))
        }))}))
    }))
  };
  
console.log( updatedGraphTable );

Answer 3

map создает новый массив, который является преобразованным входным массивом. То, что вы отображаете, это realGraphData.engagementAreas, так что вы получите преобразованную версию.

Edit:

Для такого рода задач лучше использовать библиотеку, которая помогает при манипулировании объектами, например ramda или lodash.

function main() {
  const spec = {
    engagementAreas: [{
      engagementTypes: [{
        engagements: [{
          members: [{
            position: {
              positionTitle: () => "abc"
            }
          }]
        }]
      }]
    }]
  };
  const result = transform(spec, graphData);
  console.log(result);
}


const graphData = {

  "name": "Annual meetings",
  "engagementAreas": [{
      "id": "1",
      "engagementTypes": [{
          "name": "forestry",
          "engagements": []
        },
        {
          "name": "houses",
          "engagements": [{
            "name": "engagement1",
            "members": [{
              "id": "e334",
              "account": {
                "id": "eefe"
              },
              "position": {
                "id": "3434",
                "positionTitle": "Manager"
              }
            }]
          }]
        },
        {
          "name": "landscaping",
          "engagements": [{
            "name": "engagement1343",
            "members": [{
              "position": {
                "id": "4545",
                "positionTitle": "Senior Manager"

              }
            }]
          }]
        }
      ]
    },

    {
      "name": "community days",
      "engagementTypes": [{
          "name": "skyscraping",
          "engagements": []
        },
        {
          "name": "tennis",
          "engagements": [{
            "name": "engagement346",
            "members": [{
              "id": "34",
              "account": {
                "id": "3546"
              },
              "position": {
                "id": "3999434",
                "positionTitle": "Ultime Manager"
              }
            }]
          }]
        },
        {
          "name": "Juicing",
          "engagements": [{
            "name": "347343",
            "members": [{
              "id": "4546",
              "account": {
                "id": "3545"
              },
              "position": {
                "id": "35006",
                "positionTitle": "Senior Ultimate Manager"

              }
            }]
          }]
        }
      ]
    }
  ]
}

const transform = R.curry((spec, objOrArray) => {
  const mapWithIndex = Array.isArray(objOrArray)
    ? R.addIndex(R.map)
    : R.mapObjIndexed;
  return mapWithIndex((value, key) => {
    const fnOrSpec = typeof key === "number" ? spec[0] : spec[key];
    if (fnOrSpec) {
      if (typeof fnOrSpec == "function") {
        return fnOrSpec(value);
      }
      return transform(fnOrSpec, value);
    }
    return value;
  }, objOrArray);
});

main();

<script src="https://unpkg.com/ramda@0.25.0/dist/ramda.min.js"></script>