Transforming a JSON structure in javascript

Question

I have data for a simple online store coming from a headless CMS. The data looks like this:

[
    {
        "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"
    },

]

This data will be used to make a simple store locator sorted by 1) Country and 2) State.

I'm unable to change anything on the CMS. Looking for suggested way to loop through this flat data object and list by country and state.

EDIT: I created this to extract the unique countries:

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

But again from there not sure how I would connect that to states and ultimately stores.

Looks like a typical job for Array.sort: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Patrick Hund
– Patrick Hund, Commented Dec 20, 2019 at 14:09
So what issue are you having? You have an array. You can loop over the array and get the info from the object. You have things like filter and map to help alter it. — epascarello
– epascarello, Commented Dec 20, 2019 at 14:15
I started by putting countries into an array. But wasn't quite sure how then to map states to the countries. — Dave
– Dave, Commented Dec 20, 2019 at 14:15

Arthur Grigoryan · Accepted Answer · 2019-12-20 15:20:11Z

1

Ordered by country and state.

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

answered Dec 20, 2019 at 15:20

Arthur Grigoryan

4671 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave Over a year ago

Removed this comment as figured out the usage.

Mr. Polywhirl · Accepted Answer · 2019-12-20 14:40:05Z

You can build the following country-state map by reducing the stores.

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

I reversed the order of the store data so that the sorting will actually make a difference.

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

Thank you this is great. What about console.log so it also shows the array of stores per state?

Collectives™ on Stack Overflow

Transforming a JSON structure in javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related