Converting a JSON format with JavaScript

Question

Converting a JSON format with JavaScript

As the data for a simple online store is extracted from a headless CMS, it is structured in the following format:

[
    {
        "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 utilized to create a user-friendly store locator that is categorized by Country followed by State.

No modifications can be made on the CMS system. Therefore, I am seeking recommendations on how to iterate through this flat data structure and arrange it according to country and state.

UPDATE: An attempt was made to isolate unique countries using the following code snippet:

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

However, it remains unclear on how to proceed further to link these countries with respective states and eventually the stores themselves.

javascript

Answer 1

Answer №1

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

Answer 2

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

Answer 3

Answer №2

By simplifying the stores, you can create a country-state map as shown below.

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

To emphasize sorting, I have rearranged the store data to make the sorting process more evident.

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 4

By simplifying the stores, you can create a country-state map as shown below.

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

To emphasize sorting, I have rearranged the store data to make the sorting process more evident.

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

Converting a JSON format with JavaScript

Answer №1

Answer №2

Similar questions

Enhancing SEO Performance with React Server Components

Request a HTML variable and send it to JavaScript

When trying to upload a file through input using WebDriver, the process gets stuck once the sendKeys

RXJS - Trigger a function based on a specific condition being fulfilled by a value emitted from an observable

Using JQuery to create an animated slideToggle effect for a multicolumn list

Steps to displaying a genuine Docx file within a Material CardMedia

Having trouble with submitting the code - need help resolving the issue

What is the best way to design a regular expression that will only match up to 12 numbers?

Avoid being redirected to another page after submitting the form, instead remain on the current page

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

Troubleshooting Issue 415: Adding and modifying database records through jQuery AJAX in ASP.NET 6.0 MVC Application

Issue encountered when displaying various data options in the dropdown menus within a modal window

Trigger Javascript on 'Nearby' input from Html form

Directing to index.html using ExpressJS

How can I make two Three-JS Objects simultaneously run and animate on a single webpage?

Is there a way to make the React component automatically refresh upon clicking the search button?

The parameters 'event' and 'event' are not compatible with each other

How can access to web pages be limited to only logged-in users using Node.js?

Loop through associative array in PHP using JQuery

"Why is it that when using jQuery, the .fail method doesn't accept arguments to deliberately