React / Javascript - 如何将接收到的数据过滤到过滤的列列表中？

Question

我收到数据/带有对象的数组。每个对象都有国家 - 城市和商店（在那个城市）。

例如：

1. 美国 - 洛杉矶 - shop1
2. 意大利 - 米兰 - shop2

3. 意大利 - 罗马 - shopXY

   var data = [
     {country: "Italy", city: "Milan", shop: "shop123"},
     {country: "Italy", city: "Rome", shop: "shop2"},
     {country: "USA", city: "Los Angeles", shop: "shopXY"}
   ]
   

我有3栏，我只想显示一次意大利，然后当我点击它时，我显示米兰和罗马，然后根据我是点击罗马还是米兰对应的商店。

这样做是个好习惯吗：

1. 获取所有数据，然后创建一个新的对象数组，这样我就没有重复的国家、城市等。
2. 使用过滤方法 - 但我如何过滤它，如何检查重复项 而不将它们存储在新数组等中？
3. 还有别的吗？

我尝试进行研究，但无法真正找到任何东西，即使有人只是提供一些提示，那也很棒，因为我完全迷失了。谢谢！！！！

附言。我不想为此使用任何过滤器库，因为我正在尝试自己做。

Answer 1

我建议使用 javascript 对象，而不是创建一个新数组来处理处理过的数据。 Javascript 对象的属性/值语义具有以下优点

1.) 自动处理重复项：使用国家/地区作为键，您可以创建一个新的子对象映射商店到城市，或者您只是扩展一个已经存在的商店 p>

2.) 易于访问：查找国家/商店变得像data['Italy']['Rome'] 一样简单

似乎非常适合您的用例。根据您的示例，定义此类对象的静态方式将是：

var data = {
  "Italy": {
    "Milan": ["shop123"],
    "Rome": ["shop2"]
  },
  "USA": {
    "Los Angeles": ["shopXY"]
  }
}

Answer 2

MTTI 的答案很好，为了得到它，我会使用 reduce

const newData = data.reduce((acc, val) => {
  if (!acc[val.country]) {
    acc[val.country] = { [val.city]: [val.shop] };
    return acc;
  }
  if (!acc[val.country][val.city]) {
    acc[val.country][val.city] = [val.shop];
    return acc;
  }
  acc[val.country][val.city].push(val.shop);
  return acc;
}, {})

所以最后你会得到一个像

这样的对象

{
  Italy: {
    Rome: ['Shop123'],
    Milan: ['Shop12']
  },
  USA: {
    "San Francisco": ['Shop420']
  }
}

Answer 3

您可以使用以下脚本过滤数据，之后您可以迭代脚本的结果以显示您想要的数据。

   var data = [{
        country: "Italy",
        city: "Milan",
        shop: "shop123"
    },
    {
        country: "Italy",
        city: "Rome",
        shop: "shop2"
    },
    {
        country: "USA",
        city: "Los Angeles",
        shop: "shopXY"
    },
]

var result = {};
data.forEach(function (item) {
    if (result[item.country]) {
        result[item.country][item.city] = item.shop
    } else {
        result[item.country] = {};
        result[item.country][item.city] = item.shop
    }
});

输出会像 -

{
  "Italy": {
    "Milan": "shop123",
    "Rome": "shop2"
  },
  "USA": {
    "Los Angeles": "shopXY"
  }
}