在 javascript 中转换 JSON 结构

Question

我有一个来自无头 CMS 的简单在线商店的数据。 数据如下所示：

[
    {
        "id": 12312,
        "storeName": "Store1",
        "googleMapsUrl": "https://example1.com",
        "country": "Australia",
        "state": "New South Wales"
    },
    {
        "id": 12313,
        "storeName": "Store2",
        "googleMapsUrl": "https://example2.com",
        "country": "Australia",
        "state": "Queensland"
    },
    {
        "id": 12314,
        "storeName": "Store3",
        "googleMapsUrl": "https://example3.com",
        "country": "Indonesia",
        "state": "Java"
    },

]

此数据将用于制作按 1) 国家和 2) 州排序的简单商店定位器。

我无法更改 CMS 上的任何内容。 寻找建议的方法来循环遍历这个平面数据对象并按国家和州列出。

编辑：我创建这个是为了提取独特的国家：

let newArray = this.$page.stores.edges.map(item =>{
let newObj = {};
newObj[item.node.country] = item.node.country;
newObj[item.node.country.state] = item.node.state;
console.log(newObj)
return newObj;
      });

但再次从那里不确定我将如何将其与州和最终商店联系起来。

Answer 1

您可以通过减少商店来构建以下国家/地区地图。

{
  "Australia": {
    "states": [
      "New South Wales",
      "Queensland"
    ]
  },
  "Indonesia": {
    "states": [
      "Java"
    ]
  }
}

我颠倒了商店数据的顺序，以便排序实际上会有所不同。

 let stores = sortByCountryAndState(getData()) let locations = groupByCountryAndState(stores) console.log(locations) function sortByCountryAndState(data) { return data.sort((storeA, storeB) => { if (storeA == null) return 1 if (storeB == null) return -1 let diff = storeA.country.localeCompare(storeB.country) if (diff === 0) return storeA.state.localeCompare(storeB.state) return diff }) } function groupByCountryAndState(data) { return data.reduce((countries, store, index) => { let country = countries[store.country] || {} return Object.assign(countries, { [store.country] : Object.assign(country, { states : pushAndSort(country.states || [], store.state) }) }) }, {}) } function pushAndSort(arr, value) { if (arr.indexOf(value) === -1) arr.push(value) //return arr.sort() // Sorting is done before the grouping... return arr } function getData() { return [{ "id": 12314, "storeName": "Store3", "googleMapsUrl": "https://example3.com", "country": "Indonesia", "state": "Java" }, { "id": 12313, "storeName": "Store2", "googleMapsUrl": "https://example2.com", "country": "Australia", "state": "Queensland" }, { "id": 12312, "storeName": "Store1", "googleMapsUrl": "https://example1.com", "country": "Australia", "state": "New South Wales" } ] }

 .as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 2

按国家和州订购。

 var data = [{ "id": 12314, "storeName": "Store3", "googleMapsUrl": "https://example3.com", "country": "Indonesia", "state": "Java" }, { "id": 12315, "storeName": "Store4", "googleMapsUrl": "https://example4.com", "country": "Australia", "state": "Queensland" }, { "id": 12312, "storeName": "Store1", "googleMapsUrl": "https://example1.com", "country": "Australia", "state": "New South Wales" }, { "id": 12313, "storeName": "Store2", "googleMapsUrl": "https://example2.com", "country": "Australia", "state": "Queensland" }, ] var stores = {}; var countries = new Set(data.map(item => item.country).sort()); countries.forEach(country => { var states = {}; var items = data.filter(item => item.country == country); new Set(items.map(item => item.state).sort()).forEach(state => { states[state] = items.filter(item => item.state == state) .sort(item => item.state); }); stores[country] = states; }); console.log(stores['Australia']['Queensland']);