Object Formatting - .map Is Removing My First Line

I'm altering an objects data using a .map function. The original object that's values im trying to change, it loses it's first line which ruins the formatting for me. It is only th

Solution 1:

You can use Object.assign or the spread operator to achieve a full copy with the updated properties, an example of this code would be the following

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

This doesn't make the code very readable, but it would be a one line conversion. The spread operator will copy all properties of the object, and then we overwrite the existing properties by redefining them

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

Solution 2:

Map returns an array of results. You are handing it everything inside of "engagementAreas". Instead try only passing the array to your function and setting the "engagementAreas" part of your object to the returned value

Solution 3:

map creates a new array that is a transformed input array. What you are mapping over is realGraphData.engagementAreas so you get a transformed version of it.

Edit:

For this kind of tasks is better to use some library that helps with manipulating objects like ramda or lodash.

functionmain() {
  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;
  returnmapWithIndex((value, key) => {
    const fnOrSpec = typeof key === "number" ? spec[0] : spec[key];
    if (fnOrSpec) {
      if (typeof fnOrSpec == "function") {
        returnfnOrSpec(value);
      }
      returntransform(fnOrSpec, value);
    }
    return value;
  }, objOrArray);
});

main();

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