JSON - search array for value based on unique ID

Question

I have the following JSON Feed:

var data = {
    "feeds": {
        "regions": [
            {
                "name": "Lichtenberg",
                "id": "01408.b",
                "suburbs": [
                    { "name": "Fennpfuhl", "views": 76400 },
                    { "name": "Lichtenberg", "views": 87895 },
                    { "name": "Rummelsberg", "views": 10239 }
                ]
            },
            {
                "name": "Mitte",
                "id": "03442.f",
                "suburbs": [
                    { "name": "Tiergarten", "views": 82695 },
                    { "name": "Mitte", "views": 67234 },
                    { "name": "Hansaviertel", "views": 10848 },
                    { "name": "Moabit", "views": 67500 }
                ]
            },
            {
                "name": "Friedrichshain-Kreuzberg",
                "id": "01991.o",
                "suburbs": [
                    { "name": "Friedrichshain", "views": "98494" },
                    { "name": "Kreuzberg", "views": "27800" }
                ]
            },
            {
                "name": "Templehof-Schöneberg",
                "id": "01778.k",  
                "suburbs": [
                    { "name": "Friedenau", "views": 76595 },
                    { "name": "Schöneberg", "views": 20731 },
                    { "name": "Templehof", "views": 58000 },
                    { "name": "Mariendorf", "views": 32300 }
                ]
            },
            {
                "name": "Pankow",
                "id": "02761.q",
                "suburbs": [
                    { "name": "Wießensee", "views": 81294 },
                    { "name": "Prenzlauer Berg", "views": 76470 },
                    { "name": "Pankow", "views": 90210 }
                ]
            }
        ],
    "branding": [
      {
        "municipality_id": "01408.b",
        "brand_color": "#f9cd90"
      },{
        "municipality_id": "03442.f",
        "brand_color": "#F28123"
      },{
        "municipality_id": "01991.o",
        "brand_color": "#D34E24"
      },{
        "municipality_id": "01778.k",
        "brand_color": "#563F1B"
      },{
        "municipality_id": "02761.q",
        "brand_color": "#38726C"
      }
    ],
        "customer": {
            "name": "Viktoria Tiedemann",
            "date_of_birth": "1981-09-19",
            "address": {
                "street": "Schönfließer Str 9",
                "suburb": "Prenzlauer Berg",
                "postcode": "10439"
            }
        }
    }
};

In essence what I want to do is to create an array that contains 3 items:

1. Name of the region data.feeds.regions.name
2. Total views of the region
3. Color of the chart based on the data.feeds.regions.id that is then used as a lookup key to data.branding to get the brand_color of that region.

I've got the answer for parts 1 and 2 from a previous SO Question:

var viewsPerRegion = data.feeds.regions.map(({ name, suburbs }) => ({
  label: name,
  total: suburbs.reduce((a, { views }) => a + Number(views), 0)
})); 

My attempt at getting the third one so far is as follows:

var viewsPerRegionStyled = data.feeds.regions.map(({ name, id, suburbs }) => ({
  label: name,
  total: suburbs.reduce((a, { views }) => a + Number(views), 0),
  color: if (data.feeds.region.id == data.branding.municipality_id) 
{
data.branding.brand_color} 
})); 

I'm sure I'm completely lost on this one - any help is truly appreciated.

Answer 1

You need to call find on the branding array to find the element with the matching municipality_id and then extract the found brand_color property:

var data={"feeds":{"regions":[{"name":"Lichtenberg","id":"01408.b","suburbs":[{"name":"Fennpfuhl","views":76400},{"name":"Lichtenberg","views":87895},{"name":"Rummelsberg","views":10239}]},{"name":"Mitte","id":"03442.f","suburbs":[{"name":"Tiergarten","views":82695},{"name":"Mitte","views":67234},{"name":"Hansaviertel","views":10848},{"name":"Moabit","views":67500}]},{"name":"Friedrichshain-Kreuzberg","id":"01991.o","suburbs":[{"name":"Friedrichshain","views":"98494"},{"name":"Kreuzberg","views":"27800"}]},{"name":"Templehof-Schöneberg","id":"01778.k","suburbs":[{"name":"Friedenau","views":76595},{"name":"Schöneberg","views":20731},{"name":"Templehof","views":58000},{"name":"Mariendorf","views":32300}]},{"name":"Pankow","id":"02761.q","suburbs":[{"name":"Wießensee","views":81294},{"name":"Prenzlauer Berg","views":76470},{"name":"Pankow","views":90210}]}],"branding":[{"municipality_id":"01408.b","brand_color":"#f9cd90"},{"municipality_id":"03442.f","brand_color":"#F28123"},{"municipality_id":"01991.o","brand_color":"#D34E24"},{"municipality_id":"01778.k","brand_color":"#563F1B"},{"municipality_id":"02761.q","brand_color":"#38726C"}],"customer":{"name":"Viktoria Tiedemann","date_of_birth":"1981-09-19","address":{"street":"Schönfließer Str 9","suburb":"Prenzlauer Berg","postcode":"10439"}}}}

var viewsPerRegionStyled = data.feeds.regions.map(({ name, id, suburbs }) => ({
  label: name,
  total: suburbs.reduce((a, { views }) => a + Number(views), 0),
  color: data.feeds.branding.find(
    ({ municipality_id }) => municipality_id === id
  ).brand_color
}));
console.log(viewsPerRegionStyled);

Another option is to transform the branding array into an object indexed by municipality_id beforehand, which will allow for simple object lookup, which has less complexity than .find:

var data={"feeds":{"regions":[{"name":"Lichtenberg","id":"01408.b","suburbs":[{"name":"Fennpfuhl","views":76400},{"name":"Lichtenberg","views":87895},{"name":"Rummelsberg","views":10239}]},{"name":"Mitte","id":"03442.f","suburbs":[{"name":"Tiergarten","views":82695},{"name":"Mitte","views":67234},{"name":"Hansaviertel","views":10848},{"name":"Moabit","views":67500}]},{"name":"Friedrichshain-Kreuzberg","id":"01991.o","suburbs":[{"name":"Friedrichshain","views":"98494"},{"name":"Kreuzberg","views":"27800"}]},{"name":"Templehof-Schöneberg","id":"01778.k","suburbs":[{"name":"Friedenau","views":76595},{"name":"Schöneberg","views":20731},{"name":"Templehof","views":58000},{"name":"Mariendorf","views":32300}]},{"name":"Pankow","id":"02761.q","suburbs":[{"name":"Wießensee","views":81294},{"name":"Prenzlauer Berg","views":76470},{"name":"Pankow","views":90210}]}],"branding":[{"municipality_id":"01408.b","brand_color":"#f9cd90"},{"municipality_id":"03442.f","brand_color":"#F28123"},{"municipality_id":"01991.o","brand_color":"#D34E24"},{"municipality_id":"01778.k","brand_color":"#563F1B"},{"municipality_id":"02761.q","brand_color":"#38726C"}],"customer":{"name":"Viktoria Tiedemann","date_of_birth":"1981-09-19","address":{"street":"Schönfließer Str 9","suburb":"Prenzlauer Berg","postcode":"10439"}}}}

var colorsById = data.feeds.branding.reduce((a, { municipality_id, brand_color }) => {
  a[municipality_id] = brand_color;
  return a;
}, {});
var viewsPerRegionStyled = data.feeds.regions.map(({ name, id, suburbs }) => ({
  label: name,
  total: suburbs.reduce((a, { views }) => a + Number(views), 0),
  color: colorsById[id]
}));
console.log(viewsPerRegionStyled);