JSON - 基于唯一 ID 搜索值的数组

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。

我已经从上一个 SO 问题中得到了第 1 部分和第 2 部分的答案：

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

你需要在branding数组上调用find来找到匹配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);