Arranging the index of an array according to a separate array of objects in JavaScript using Vue

Question

Arranging the index of an array according to a separate array of objects in JavaScript using Vue

I have two arrays of objects that need to be sorted based on the value of a key in the other array.

        array1: [
            {
                group: 'GROUP1',
                sort_order: 1,
            },
            {
                group: 'GROUP2',
                sort_order: 2,
            },
            {
                group: 'GROUP3',
                sort_order: 3,
            }
        ],
        array2: {
            'GROUP3' : [
                {
                    "price": 10,
                    "amount": 2,
                },
                {
                    "price": 45,
                    "amount": 7,
                },
            ],
            'GROUP2' : [
                {
                    "price": 10,
                    "amount": 2,
                },
                {
                    "price": 45,
                    "amount": 7,
                },
            ],
            'GROUP1' : [
                {
                    "price": 10,
                    "amount": 2,
                },
                {
                    "price": 45,
                    "amount": 7,
                },
            ]
        }

Now, I need to rearrange the indexes of array2 based on the "sort_order" in array1.

I'm anticipating the order of array2 to be something like GROUP1, GROUP2, GROUP3.

Thank you in advance!

javascript arrays vue.js

Answer 1

Answer №1

const ordered = Object.entries(list2).sort(([groupA], [groupB]) => 
    list1.find(item => item.group === groupA).order - 
    list1.find(item => item.group === groupB).order)

will provide you with

[
    [
        "CATEGORY1",
        [
            {
                "price": 10,
                "quantity": 2
            },
            {
                "price": 45,
                "quantity": 7
            }
        ]
    ],
    [
        "CATEGORY2",
        [
            {
                "price": 10,
                "quantity": 2
            },
            {
                "price": 45,
                "quantity": 7
            }
        ]
    ],
    ...

Answer 2

const ordered = Object.entries(list2).sort(([groupA], [groupB]) => 
    list1.find(item => item.group === groupA).order - 
    list1.find(item => item.group === groupB).order)

will provide you with

[
    [
        "CATEGORY1",
        [
            {
                "price": 10,
                "quantity": 2
            },
            {
                "price": 45,
                "quantity": 7
            }
        ]
    ],
    [
        "CATEGORY2",
        [
            {
                "price": 10,
                "quantity": 2
            },
            {
                "price": 45,
                "quantity": 7
            }
        ]
    ],
    ...

Answer 3

Answer №2

It seems like you are looking to sort the second array based on the information from the first array. I suggest keeping the original array as it is and performing the sorting operation within a computed property. Here is an example:

const app = new Vue({
  el:'#app',
  data: () => ({
    array1: [
      {
        group: 'GROUP1',
        sort_order: 1,
      },
      {
        group: 'GROUP2',
        sort_order: 2,
      },
      {
        group: 'GROUP3',
        sort_order: 3,
      },
    ],
    array2: {
      'GROUP3' : [
        {
          "price": 10,
          "amount": 2,
        },
        {
          "price": 45,
          "amount": 7,
        },
      ],
      'GROUP2' : [
        {
          "price": 10,
          "amount": 2,
        },
        {
          "price": 45,
          "amount": 7,
        },
      ],
      'GROUP1' : [
        {
          "price": 10,
          "amount": 2,
        },
        {
          "price": 45,
          "amount": 7,
        },
      ],
    },
  }),
  mounted() {
    setTimeout(() => {
      console.log(this.sortedArray2);
    }, 1000);
  },
  computed: {
    sortedArray2() {
      const arr2 = { ...this.array2 };
 
      this.array1.map(item1 => {
        arr2[item1.group] = arr2[item1.group].sort((a, b) => {
          switch(item1.sort_order) {
            case 1: {
              return a.price > b.price ? 1 : -1;
            }
            case 2: {
              return a.price < b.price ? 1 : -1;
            }
            default: {
              return a.amount < b.amount ? 1 : -1;
            }
          }
        });
      });
      
      return arr2;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
</div>

Answer 4

It seems like you are looking to sort the second array based on the information from the first array. I suggest keeping the original array as it is and performing the sorting operation within a computed property. Here is an example:

const app = new Vue({
  el:'#app',
  data: () => ({
    array1: [
      {
        group: 'GROUP1',
        sort_order: 1,
      },
      {
        group: 'GROUP2',
        sort_order: 2,
      },
      {
        group: 'GROUP3',
        sort_order: 3,
      },
    ],
    array2: {
      'GROUP3' : [
        {
          "price": 10,
          "amount": 2,
        },
        {
          "price": 45,
          "amount": 7,
        },
      ],
      'GROUP2' : [
        {
          "price": 10,
          "amount": 2,
        },
        {
          "price": 45,
          "amount": 7,
        },
      ],
      'GROUP1' : [
        {
          "price": 10,
          "amount": 2,
        },
        {
          "price": 45,
          "amount": 7,
        },
      ],
    },
  }),
  mounted() {
    setTimeout(() => {
      console.log(this.sortedArray2);
    }, 1000);
  },
  computed: {
    sortedArray2() {
      const arr2 = { ...this.array2 };
 
      this.array1.map(item1 => {
        arr2[item1.group] = arr2[item1.group].sort((a, b) => {
          switch(item1.sort_order) {
            case 1: {
              return a.price > b.price ? 1 : -1;
            }
            case 2: {
              return a.price < b.price ? 1 : -1;
            }
            default: {
              return a.amount < b.amount ? 1 : -1;
            }
          }
        });
      });
      
      return arr2;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
</div>

Arranging the index of an array according to a separate array of objects in JavaScript using Vue

Answer №1

Answer №2

Similar questions

The animation for the CSS gradient background is failing to animate

Is it possible to efficiently transfer a Tensorflow.js Tensor between Node.js processes?

Update the input type on the fly

What steps should be taken to effectively integrate Amplify Authenticator, Vue2, and Vite?

"Auth.currentSession is indicating that there is no user currently logged in

How to use JQuery to parse an external JSON file with array elements in Javascript

Implement the use of HTML buttons to dynamically change the source attribute of an image using

Analyzing Array Elements in a Lottery Simulation using C++

Is it possible to utilize the `useLoaderData` function in ReactRouter v6.9.0 within sibling components of the component where `loader()` is employed? If so, what is the method

Trigger a keypress event following the activation of a button

Adjust form elements dynamically depending on the selected option in a dropdown menu using Ruby on Rails

Displaying <p> content upon selection of a radio button

Displaying dynamic data with Vue.js and Chart.js

The issue arose with using Numpy hstack where the error message "ValueError: all the input arrays must have the same number of dimensions" was encountered. However,

Leveraging the html-webpack-plugin for creating an index.html file within Webpack (specifically in a project based on the vue-simple boiler

Retrieve a specific div element from the response data in AngularJS

Sort through various table columns

Encountering a Project Oxford error - HTTP 404 while trying to access Computer Vision API with Javascript

What is the best way to transform an array of objects into a single string in JavaScript?

Determine whether a component is linked to an event listener