split object property value by comma and append with another property value

Question

I have a below object

multiSpaceIdentityInformation =    
{
   roomNumber: "N/A"
   spaceNumber: "L1-008-5, L4-003, L1-009"
   spaceName: "Space, STUDIO, LOBBY"
}

I am looking to represent this with listed information like this below

const identityData = [
    { label: 'Room Number', value: multiSpaceIdentityInformation.roomNumber },
    {
      label: 'Space Info',
      value: `${multiSpaceIdentityInformation.spaceNumber} - ${multiSpaceIdentityInformation.spaceName}`
    }
  ];

  return (
    <Descriptions size="small" column={1} title="Identity">
      {identityData.map(({ label, value }) => (
        <Item key={label} label={<Text strong>{label}</Text>}>
          {value}
        </Item>
      ))}
    </Descriptions>
  );

What I am trying to represent in the spaceInfo label string looks like as this

L1-008-5 - Space, L4-003- STUDIO, L1-009 - LOBBY

But with the above code for the Space Info, it is printing like as this below

L1-008-5, L4-003 - Space, STUDIO ... and I am not sure where I am wrong with the above code, and could anyone please suggest any idea where it goes wrong.

Many thanks in advance

You title says to split by comma, I see none of that in the code. https://stackoverflow.com/questions/96428/how-do-i-split-a-string-breaking-at-a-particular-character — epascarello, Oct 25 '21 at 22:46
so the `spaceNumber` and `spaceName` values are actually stringified arrays, and you want to rezip them? (combining spaceNumber[0] with spaceName[0], [1] with [1], etc?) — Mike 'Pomax' Kamermans, Oct 25 '21 at 23:03
Then you definitely want to put _that_ in your post ;) The code you're showing is mostly not necessary here, just explain you have two strings, representing stringified arrays, and that you want to recombine them based on element position, showing your two arrays, and the _exact_ output you're trying to form based on them (no "..." or the like, just show concrete input and concrete output). But that updated description is almost certainly more than enough to already find someone having asked that same question before. — Mike 'Pomax' Kamermans, Oct 25 '21 at 23:12
Also note that this is called "zipping" in programming parlance, where you take two aligned arrays, (although in this case they're strings, we can trivially turn them back into arrays) and then merge them based on element index. E.g. https://stackoverflow.com/questions/22015684/how-do-i-zip-two-arrays-in-javascript — Mike 'Pomax' Kamermans, Oct 25 '21 at 23:14

Vahid Alimohamadi · Accepted Answer · 2021-10-25T23:19:56.617

1

Do you expect something like this?

let m = {
   rnum: "N/A",
   snum: "L1-008-5, L4-003, L1-009",
   sn: "Space, STUDIO, LOBBY"
};


let snumA=m.snum.split(',');
let snA=m.sn.split(',');


console.log(
  snumA.reduce((r,i,idx)=>{
     r=`${r}${idx!==0 ? ',' : ''}${i} - ${snA[idx]}`
     return r;
  },'')   
)

edited Oct 25 '21 at 23:19

answered Oct 25 '21 at 23:02

Vahid Alimohamadi

4,900
2
22
37

1

No need for the return or "start value" even (assignments return their assigned value, and default arguments are great for reduction). ```snumA.reduce((r=``,i,idx) => `${r}${idx>0 && `,`}${i} - ${snA[idx]}`)``` – Mike 'Pomax' Kamermans Oct 25 '21 at 23:10
@Mike'Pomax'Kamermans You right but i usually do minimization at the end. Because it makes me confused (in think and write time). – Vahid Alimohamadi Oct 25 '21 at 23:13
@cybercoder, getting an error at here `r=`${r}${idx!==0 ? ',' : ''}${i} - ${snA[idx]}`` Assignment to function parameter 'r' – Glory Raj Oct 25 '21 at 23:30
@Mike'Pomax'Kamermans, with your suggestion, I am getting an output like this `L1-008-5, L4-003 - STUDIO.` – Glory Raj Oct 25 '21 at 23:36
yeah, that `&&` simplification was incorrect, it should stay the ternary that you see in the answer. – Mike 'Pomax' Kamermans Oct 25 '21 at 23:54
`Assignment to function parameter 'r'` is just a linting error. You can disable it for the line since refactoring to please the linter makes the reduce less readable. – pilchard Oct 26 '21 at 00:48
@Mike'Pomax'Kamermans Setting a default value for the accumulator does not work, as not specifying the initial value (second argument to `reduce`) just makes the accumulator be set to the first element of the array in the first iteration. – Unmitigated Oct 26 '21 at 15:15
Nice, I was not aware of that. MDN explains this behaviour [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#parameters). – Mike 'Pomax' Kamermans Oct 26 '21 at 15:34

score 1 · Answer 2 · answered Oct 26 '21 at 15:09

Piggybacking the other answer, with a different (I think simpler) construct, and producing the desired output without double spaces inside:

let m = {
   rnum: "N/A",
   snum: "L1-008-5, L4-003, L1-009",
   sn: "Space, STUDIO, LOBBY"
};

let snumA=m.snum.split(',');
let snA=m.sn.split(',');

console.log(
  snumA.map((item,idx)=>`${item} - ${snA[idx].trim()}`).join()   
);

split object property value by comma and append with another property value

2 Answers2