JSON - поиск в массиве значений на основе уникального идентификатора

Question

У меня есть следующий поток JSON:

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"
            }
        }
    }
};

По сути, я хочу создать массив из 3 элементов:

1. Название региона data.feeds.regions.name
2. Общее количество просмотров региона
3. Цвет диаграммы на основе data.feeds.regions.id, который затем используется в качестве ключа поиска для data.branding, чтобы получить brand_color этой области.

У меня есть ответ для частей 1 и 2 из предыдущего вопроса SO:

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

Моя попытка получить третью пока заключается в следующем:

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} 
})); 

Я уверен, что полностью потерялся - любая помощь действительно ценится.

Answer 1

Вам нужно вызвать find в массиве branding, чтобы найти элемент с совпадающим municipality_id, а затем извлечь найденное свойство brand_color:

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);

Другой вариант - преобразовать массив branding в объект, предварительно индексированный municipality_id, что позволит осуществлять простой поиск объекта, который имеет меньшую сложность, чем .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);