Arranging Objects and Arrays by Two Criteria

Question

Arranging Objects and Arrays by Two Criteria

Extracting data from an API that provides information in the format below:

[
 {
  "id": 173,
  "date": "2020-12-10T16:05:30",
  "date_gmt": "2020-12-10T16:05:30",
  "guid": {},
  "modified": "2020-12-10T16:05:31",
  "modified_gmt": "2020-12-10T16:05:31",
  "slug": "test",
  "status": "publish",
  "type": "place",
  "link": "http://localhost:81/test/",
  "title": {},
  "content": {},
  "featured_media": 0,
  "template": "",
  "acf": {
    "address": {
    "address": "123 Test Address",
    "street_number": "123",
    "street_name": "Test Address",
    "city": "Philipsburg",
    "state": "Sint Maarten",
    "country": "Sint Maarten",
    "country_short": "SX"
  },
  "header": {}
  },
  "_links": {}
 },
 etc
]

Saving it in Vuex, and structuring the data with this approach:

computed: {
    resorts() {
      const resorts = {};
      if (this.$store.state.loading === false) {
        this.$store.state.posts.forEach((post) => {
          const c = post.acf.address.country;
          const s = post.acf.address.state;
          //const t = post.title;
          resorts[c] = resorts[c] || {};
          resorts[c][s] = resorts[c][s] || [];
          resorts[c][s].push(post);
        });
      }
      return resorts;
    },
}

Rendering the data in a v-for loop using Pug:

section.united-states(v-for="(country, index) in resorts" v-if="index==='United States'")
  h1(v-html="index")
  section.state(v-for="(state, subIndex) in country" :key="subIndex" :class="subIndex.toLowerCase()")
    h5(v-html="subIndex")
    ul
      li(v-for="post, resort) in state")
        listing(:id="post.id" :slug="post.slug" :image="post.acf.header" :title="post.title.rendered" :city="post.acf.address.city" :street="post.acf.address.street_name_short")

The current display is correct. However, I aim to sort it alphabetically by Country, followed by State, and then City names. I've experimented with sorting methods like lodash.orderBy, but was unable to achieve the desired organization. The Vue inspector reveals that countries and states (not cities) are listed alphabetically. Any suggestions?

javascript vue.js sorting vuejs2 vuex

Answer 1

Answer №1

If you're looking for a way to organize posts based on their address, one approach is to first sort the posts before grouping them.

To achieve this, you can utilize Array.prototype.sort() along with String.prototype.localeCompare(). You can create a utility function named sortPosts() that will help in sorting the posts by their country, state, city, and street_name fields:

const sortPosts = posts =>
  posts.slice().sort((a,b) => {
    const countryA = a.acf.address.country
    const countryB = b.acf.address.country
    const stateA = a.acf.address.state
    const stateB = b.acf.address.state
    const cityA = a.acf.address.city || '' 
    const cityB = b.acf.address.city || ''
    const streetA = a.acf.address.street_name
    const streetB = b.acf.address.street_name
    return countryA.localeCompare(countryB) || stateA.localeCompare(stateB) || cityA.localeCompare(cityB) || streetA.localeCompare(streetB)
  })

After sorting, you can then group these posts using similar logic but with a small tweak. Change the data type of the local variable resorts from Object to Map. This change is necessary because object iteration may not always maintain order, which could affect the sorting done by sortPosts():

export default {
  computed: {
    resorts() {
      const resorts = new Map();

      if (this.$store.state.loading === false) {
        sortPosts(this.$store.state.posts).forEach((post) => {
          const c = post.acf.address.country;
          const s = post.acf.address.state;

          if (!resorts.has(c)) {
            resorts.set(c, new Map());
          }
          const stateMap = resorts.get(c);
          if (!stateMap.has(s)) {
            stateMap.set(s, []);
          }
          stateMap.get(s).push(post);
        });
      }
      return resorts
    },
  }
}

Note that as of version 2.6.12, v-for does not directly support Maps. To work around this limitation, you can use Array.from() to make the Map iterable within the template using v-for:

<section v-for="[country, countryData] in Array.from(resorts)" :key="country">
  <h1 v-html="country" />
  <section class="state" v-for="[state, posts] in Array.from(countryData)" :key="state" :class="state.toLowerCase()">
    <h5 v-html="state" />
    <ul>
      <li v-for="(post, resort) in posts" :key="post.id">
        ...
      </li>
    </ul>
  </section>
</section>

You can check out a live demo for reference.

Answer 2

If you're looking for a way to organize posts based on their address, one approach is to first sort the posts before grouping them.

To achieve this, you can utilize Array.prototype.sort() along with String.prototype.localeCompare(). You can create a utility function named sortPosts() that will help in sorting the posts by their country, state, city, and street_name fields:

const sortPosts = posts =>
  posts.slice().sort((a,b) => {
    const countryA = a.acf.address.country
    const countryB = b.acf.address.country
    const stateA = a.acf.address.state
    const stateB = b.acf.address.state
    const cityA = a.acf.address.city || '' 
    const cityB = b.acf.address.city || ''
    const streetA = a.acf.address.street_name
    const streetB = b.acf.address.street_name
    return countryA.localeCompare(countryB) || stateA.localeCompare(stateB) || cityA.localeCompare(cityB) || streetA.localeCompare(streetB)
  })

After sorting, you can then group these posts using similar logic but with a small tweak. Change the data type of the local variable resorts from Object to Map. This change is necessary because object iteration may not always maintain order, which could affect the sorting done by sortPosts():

export default {
  computed: {
    resorts() {
      const resorts = new Map();

      if (this.$store.state.loading === false) {
        sortPosts(this.$store.state.posts).forEach((post) => {
          const c = post.acf.address.country;
          const s = post.acf.address.state;

          if (!resorts.has(c)) {
            resorts.set(c, new Map());
          }
          const stateMap = resorts.get(c);
          if (!stateMap.has(s)) {
            stateMap.set(s, []);
          }
          stateMap.get(s).push(post);
        });
      }
      return resorts
    },
  }
}

Note that as of version 2.6.12, v-for does not directly support Maps. To work around this limitation, you can use Array.from() to make the Map iterable within the template using v-for:

<section v-for="[country, countryData] in Array.from(resorts)" :key="country">
  <h1 v-html="country" />
  <section class="state" v-for="[state, posts] in Array.from(countryData)" :key="state" :class="state.toLowerCase()">
    <h5 v-html="state" />
    <ul>
      <li v-for="(post, resort) in posts" :key="post.id">
        ...
      </li>
    </ul>
  </section>
</section>

You can check out a live demo for reference.

Arranging Objects and Arrays by Two Criteria

Answer №1

Similar questions

Extracting the magnifying glass from the picture

The disappearing act of Redux state after being added to a nested array

Creating secure RSA keys using a predetermined seed - a step-by-step guide

Experiencing difficulties in transmitting images/files to API through reactjs and Material UI upload component

How to align an image in the center of a circular flex container

Adding elements to an array in Vue.js using a method

Is there a way to detect the completion of the fadeout animation before calling a function?

Unable to change the text with Jquery functionality

What are the benefits of removing event listeners in Reactjs?

Tips for enabling autoplay for videos in Owl Carousel

Array of JSON data passed in the request body

What could be causing the Logical Or to fail in my function?

Angular with Leaflet and Leaflet AwesomeMarkers error: "Attempting to access 'icon' property of undefined"

Issues with fundamental JavaScript client-side code

Creating a progress bar feature using local storage in JavaScript

Concealing option value based on ng-if conditions in AngularJS: A guide

Filtering DataGrid columns with an external button in Material-UI: A step-by-step guide

Encountering an issue with getDerivedStateFromProps in React where an error states: Unable to retrieve property 'setState' of null

What is the approach of Angular 2 in managing attributes formatted in camelCase?

Modifying JavaScript prototypes on the fly can lead to troublesome issues