I am trying to join the array of objects internal properties with the comma , like as below

const multiSpaceIdentityInformation = spaces?.reduce(
    (acc, space) => {
      acc.roomName = `${acc.roomName},${space.spaceIdentity.roomName}`;
      acc.roomNumber = `${acc.roomNumber},${space.spaceIdentity.roomNumber}`;
      acc.storyName = `${acc.storyName},${space.buildingStory?.name}`;
      acc.spaceNumber = `${acc.spaceNumber},${space.spaceIdentity.number}`;
      acc.spaceName = `${acc.spaceName},${space.spaceIdentity.name}`;
      return acc;
    },
    {
      roomName: 'N/A',
      roomNumber: 'N/A',
      storyName: 'N/A',
      spaceNumber:'N/A',
      spaceName: 'N/A'
    }
  );

But somehow, I cannot display the information even I have spaces holding the array of objects. What I am trying to display is if there is no information, I would like to say 'N/A' as the default option.

I am accessing the above information here

 const identityData = [
    { label: 'Room Number', value: multiSpaceIdentityInformation.roomNumber },
    { label: 'Room Name', value: multiSpaceIdentityInformation.roomName },
    { label: 'Level', value: multiSpaceIdentityInformation.storyName },
    { label: 'Space Number', value: multiSpaceIdentityInformation.spaceNumber },
    { label: 'Space Name', value: multiSpaceIdentityInformation.spaceName }
  ];

Could anyone please let me know where it goes wrong with the above code? Many thanks in advance!

Sample input

{
  "Spaces": [
    {
      "spaceGeometry":{
        "roomName": ""
        "roomNumber": "",
        "number": "number1"
        "name": "space1"
      },
       "buildingStory":{
        "name": "story1"
      }
    },
    {
      "spaceGeometry":{
        "roomName": ""
        "roomNumber": "",
        "number": "number2"
        "name": "space2"
      },
       "buildingStory":{    
        "name": "story2"
      }
    },
  ]
}

and desired output be like

multiSpaceIdentityInformation.roomName = "N/A"
multiSpaceIdentityInformation.roomNumber = "N/A"
multiSpaceIdentityInformation.storyName = "story1, story2"
multiSpaceIdentityInformation.spaceNumber = "number1, number2"
multiSpaceIdentityInformation.spaceName = "space1, space2"
     

CodePudding user response：

The second parameter of reduce() is the initial value, so "N/A" will be rendered as long as spaces is an array. Here's what I would do:

const appendData = (initialValue, newValue) => {
  if(!newValue) return initialValue;
  if(!initialValue || initialValue === '') return newValue;
  return `${initialValue}, ${newValue}`;
}

const multiSpaceIdentityInformation = spaces?.reduce(
    (acc, space) => ({
      roomName: appendData(acc.roomName, space.spaceIdentity.roomName),
      roomNumber: appendData(acc.roomNumber, space.spaceIdentity.roomNumber),
      storyName: appendData(acc.storyName, space.buildingStory?.name),
      spaceNumber: appendData(acc.spaceNumber, space.spaceIdentity.number),
      spaceName: appendData(acc.spaceName, space.spaceIdentity.name)
    }),
    {
      roomName: '',
      roomNumber: '',
      storyName: '',
      spaceNumber:'',
      spaceName: ''
    }
  );

Object.keys(multiSpaceIdentityInformation).forEach((key) => {
  if(multiSpaceIdentityInformation[key] === '') 
    multiSpaceIdentityInformation[key] = 'N/A';
});