Show multiple values from JSON

Question

So I'm building some content with Formio and it has the ability to add custom JSON content for the drop down options.

This is my JSON:

[
 {
"MBB": [
  {
    "Name": "BYO Sim"
  },
  {
    "Name": "Device Sim"
  },
  {
    "Name": "Apple Watch"
  },
  {
    "Name": "Samsung Watch"
  }
],
"WB": [
  {
    "Name": "4G with Device"
  },
  {
    "Name": "4G without Device"
  },
  {
    "Name": "5G"
  }
]
}
]

What I want to do is show all values that are under MBB:Name

I have found that when I enter the below, I get the value "Device Sim" returned but I want to return all values under MBB and Name as I will soon be adding more options, not just Name.

item.MBB[1].Name

If I just do:

 item.MBB.Name

I just get an undefined outcome so I'm a little lost.

Any help would be appreciated!

if you want to get all the names in MBB, you can use `map` function - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map — Sarun UK, Oct 27 '20 at 07:08

score 0 · Answer 1 · answered Oct 27 '20 at 07:09

0

You need a function to extract an array of just Name from the array of objects, each of which contains its own Name.

item.MBB.map(obj => obj.Name)

answered Oct 27 '20 at 07:09

kshetline

12,547
4
37
73

Thank you for that! Super helpful however now the results are in a line however wanting them as individual values so that they are independent options in the drop down....not sure if you know how to make this be different? – Noah Oct 28 '20 at 01:37
The original question didn't say anything about a particular format for the result, just extracting information, which the above accomplishes. There is no one drop down provider for web pages, so you'd have to specify what you're using to get a particular answer for your particular drop down. – kshetline Oct 28 '20 at 01:43
So as per my original question, I'm using Formio which has the ability to add custom JSON for the values of the drop down. – Noah Oct 28 '20 at 02:07

score 0 · Answer 2 · answered Oct 27 '20 at 07:10

You can remove the first array:

 {
"MBB": [
  {
    "Name": "BYO Sim"
  },
  {
    "Name": "Device Sim"
  },
  {
    "Name": "Apple Watch"
  },
  {
    "Name": "Samsung Watch"
  }
],
"WB": [
  {
    "Name": "4G with Device"
  },
  {
    "Name": "4G without Device"
  },
  {
    "Name": "5G"
  }
]
}

score 0 · Answer 3 · answered Oct 27 '20 at 07:14

Use map method of the array for the iteration.

const data = 
  {
"MBB": [
  {
    "Name": "BYO Sim"
  },
  {
    "Name": "Device Sim"
  },
  {
    "Name": "Apple Watch"
  },
  {
    "Name": "Samsung Watch"
  }
],
"WB": [
  {
    "Name": "4G with Device"
  },
  {
    "Name": "4G without Device"
  },
  {
    "Name": "5G"
  }
]
}
;

const result = data['MBB'].map(({Name}) => Name);
console.log(result);

Show multiple values from JSON

3 Answers3