Группировать json массив по значению

Question

Я относительно новичок в Vue и пытаюсь организовать ответ API по странам, а затем по штатам. Ниже приводится пример ответа от API:

[
  {
    "id": 1,
    "title": {
      "rendered": "Test 1"
    },
    "acf": {
      "address_property": {
        "city": "Lenox",
        "state": "Massachusetts",
        "country": "United States",
      }
    }
  },
  {
    "id": 2,
    "title": {
      "rendered": "Test 2"
    },
    "acf": {
      "address_property": {
        "city": "Branson",
        "state": "Missouri",
        "country": "United States",
      }
    }
  },
  {
    "id": 3,
    "title": {
      "rendered": "Test 3"
    },
    "acf": {
      "address_property": {
        "city": "Branson",
        "state": "Missouri",
        "country": "United States",
      }
    }
  },
  {
    "id": 4,
    "title": {
      "rendered": "Test 4"
    },
    "acf": {
      "address_property": {
        "city": "Tallinn",
        "country": "Estonia",
      }
    }
  }
]

У меня успешно печатается код на странице, однако мне не удалось систематизировать эту информацию. Вот идеальный результат:

США

Массачусетс

• Тест 1

Миссури

• Тест 2
• Тест 3

Международный

Эстония

• Тест 4

Текущий код, который у меня есть:

data: function() {
    return {
      properties: []
    };
  },
  methods: {
    loadDestinations: function() {
      axios
        .get("//localhost:81/wp-json/wp/v2/properties?_embed")
        .then(response => {
          sessionStorage.setItem("properties", JSON.stringify(response.data));
          this.properties= response.data;
          return response.data;
        })
        .catch(error => {
          console.error(error); // for debugging maybe
        });
    }
  },
  mounted() {
    if (sessionStorage.getItem("properties")) {
      this.properties= JSON.parse(sessionStorage.getItem("properties"));
    } else {
      this.loadDestinations();
    }
  }

Answer 1

Вы можете попробовать что-то подобное с помощью reduce :

let data = [
  {
    "id": 1,
    "title": {
      "rendered": "Test 1"
    },
    "acf": {
      "address_property": {
        "city": "Lenox",
        "state": "Massachusetts",
        "country": "United States",
      }
    }
  },
  {
    "id": 2,
    "title": {
      "rendered": "Test 2"
    },
    "acf": {
      "address_property": {
        "city": "Branson",
        "state": "Missouri",
        "country": "United States",
      }
    }
  },
  {
    "id": 3,
    "title": {
      "rendered": "Test 3"
    },
    "acf": {
      "address_property": {
        "city": "Branson",
        "state": "Missouri",
        "country": "United States",
      }
    }
  },
  {
    "id": 4,
    "title": {
      "rendered": "Test 4"
    },
    "acf": {
      "address_property": {
        "city": "Tallinn",
        "country": "Estonia",
      }
    }
  }
]

let grouped = data.reduce((acc, obj) => {
    let outerKey = obj.acf.address_property.state === undefined ?  'International' : obj.acf.address_property.country
    let innerKey = outerKey === 'International' ?  obj.acf.address_property.country :  obj.acf.address_property.state
    if (!acc[outerKey]) { acc[outerKey] = {} }
    if (!acc[outerKey][innerKey]) { acc[outerKey][innerKey] = [] }
    acc[outerKey][innerKey].push(obj.title.rendered)
    return acc
  }, {})
  
  
  
console.log(grouped)

Answer 2

Вы можете использовать такой метод для реорганизации данных перед их отображением:

function prepareData(data) {
    var countries = {};
    data.forEach(function(entry) {
        if (!(entry.acf.address_property.country in countries)) {
            countries[entry.acf.address_property.country] = {};
        }
        if (!(entry.acf.address_property.city in countries[entry.acf.address_property.country])) {
            countries[entry.acf.address_property.country][entry.acf.address_property.city] = [entry];
        } else {
            countries[entry.acf.address_property.country][entry.acf.address_property.city].push(entry);
        }
    })
    return countries;
}

this.properties = prepareData(response.data);