When I make an API call for a list of properties, the data comes back unorganized. Here is how the data from the API looks when stored in vuex:
posts:[
{
id: 1;
title: "Place",
acf: {
address: {
state: "Arkansas",
country: "United States"
},
},
},
{
id: 2;
title: "Place 2",
acf: {
address: {
state: "Arkansas",
country: "United States"
},
},
},
{
id: 3;
title: "Place 3",
acf: {
address: {
state: "Arkansas",
country: "United States"
},
},
},
{
id: 4;
title: "Place 4",
acf: {
address: {
state: "Missouri",
country: "United States"
},
},
},
{
id: 5;
title: "Place 5",
acf: {
address: {
state: "Johor",
country: "Malaysia"
},
},
},
]
The challenge now is to organize this data in a v-for loop with the following structure (showing United States first, followed by alphabetical order):
- United States
- Arkansas
- Place
- Place 2
- Place 3
- Missouri
- Place 4
- Arkansas
- Malaysia
- Johor
- Place 5
- Johor
To achieve this hierarchy, it seems like I should use a computed function, but I'm struggling to implement the structure of:
- Country
- State
- Place