Displaying AdditiveList selections on GUI

[jomis003]

Looking for the most optimized way to display additive list selections. Below is the code for my sample list.

<AdditiveList
  title="Select List"
  settingsKey="list"
  maxItems="5"
  renderItem={
    ({ name, value }) =>
      <TextImageRow
        label={name}
        sublabel={value.location}
      />
  }
  addAction={
    <Select
      label="Add Item"
      options={[
        { name: 'Label1', required: false, value: {location: 'Sub-Label'} },
        { name: 'Label2', required: false  value: {location: 'Sub-Label'} },
        { name: 'Label3', required: true,  value: {location: 'Sub-Label'} },
        { name: 'Label4', required: false  value: {location: 'Sub-Label'} },
        { name: 'Label5', required: false, value: {location: 'Sub-Label'} }
      ]}
    />
  }
/>

It displays properly in the app settings and I select Label, Label3 and Label5.

I am then parsing the JSON data to extract the values

    if (evt.data.key === "list" && evt.data.newValue) {
    let mSelect = evt.data.newValue.replace(/\\/g, "");
    let mFinal = JSON.parse(mSelect);
 
From here I can console log the individual values without issue.
 console.log(mFinal[0].value.location);
 console.log(mFinal[1].value.location);
 console.log(mFinal[2].value.location);
 
What I want to do from here is display each value in a list on the GUI with each one on its own line regardless of which one is selected.
If I set it as an ID text element, then I have to define the x and y coordinates which means there would be white space where one is not selected.

Any help is appreciated.

[jomis003 · Accepted solution]

I was able to do this with the following if/else statements for each item:

if (mFinal[0] == null) {
       let mselection1 = "None Defined";
     }
       else if (mFinal[0].value.location != null) {
        let mselection1 = (mFinal[0].value.location);
       }