Vue: sort array based on object order

Question

Given an array like this:

var endArray = [34, 35, 32]

And an object like this:

var order = [{"id":35},{"id":34},{"id":32},{"id":30},{"id":28},{"id":24},{"id":17},{"id":15},{"id":3}]

How can I re-sort endArray when order is changed? I'm working in Vue so I can write a watcher like so:

watch: {
  order: function (newObject) {
    // resort endArray here somehow
  }
}

But I'm not sure how to map the order to sort endArray.

Update

Expected result is:

endArray = [35, 34, 32]

To match the order of id keys set in order.

Do you want to sort endArray based on order of order array ? — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Oct 24, 2018 at 7:49
There are other factors at play beyond how I've simplified the problem for SO, i..e, the array controls the IDs selected, the object controls the order. — t56k
– t56k, Commented Oct 24, 2018 at 7:58

Nina Scholz · Accepted Answer · 2018-10-24 08:05:54Z

3

You could slice the array for getting the first three objects and map id.

watch: {
    order: function (newObject) {
        endArray = newObject.slice(0, 3).map(({ id }) => id);
    }
}

A different solution could be to sort the array.

watch: {
    order: function (newObject) {
        const getIndex = id => newObject.findIndex(o => o.id === id);
        endArray.sort((a, b) => getIndex(a) - getIndex(b));
    }
}

edited Oct 24, 2018 at 8:05

answered Oct 24, 2018 at 8:00

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mihai Alexandru-Ionut Over a year ago

Since we have an array of primitives, I think is better to use indexOf method.

Nina Scholz Over a year ago

@MihaiAlexandru-Ionut, the order array contains objects, as i see it ...

t56k Over a year ago

Going to have to go with this one since it's super succinct and was the first one that worked. Thank-you.

Ferrybig Over a year ago

You can even make a computed property: endArray() { return newObject.slice(0, 3).map(({ id }) => id); }

Niklesh Raut · Accepted Answer · 2018-10-24 08:01:51Z

1

Make an array to find ids and split it by length of given array/OR direct provide length if known here 3.

var endArray = [34, 35, 32];
var order = [{"id":35},{"id":34},{"id":32},{"id":30},{"id":28},{"id":24},{"id":17},{"id":15},{"id":3}];
var orderIds = order.map(function(e){return e.id});
console.log(orderIds.splice(0,endArray.length));

answered Oct 24, 2018 at 8:01

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Comments

Ferrybig · Accepted Answer · 2018-10-24 08:14:40Z

The way to solve this problem is to divide the problem in steps:

Since you want to sort the array, you want to call endArray.sort((a, b) => {})

On what do you want to sort? The index where the idcould be found:

endArray.sort((a, b) => {
    let indexA;
    for(indexA = 0; indexA < this.order.length; indexA++) {
        if (this.order[indexA].id === a) break;
    }
    let indexB;
    for(indexB = 0; indexB < this.order.length; indexB++) {
        if (this.order[indexB].id === b) break;
    }
    // ...
})

How do we want to sort it? ascending:

endArray.sort((a, b) => {
    let indexA;
    for(indexA = 0; indexA < this.order.length; indexA++) {
        if (this.order[indexA].id === a) break;
    }
    let indexB;
    for(indexB = 0; indexB < this.order.length; indexB++) {
        if (this.order[indexB].id === b) break;
    }
    if (indexA > indexB) return 1;
    if (indexB > indexA) return -1;
    return 0;
})

When do we want to sort it? When order or newArray changes:

new Vue({
    el: '#app',
    data: {
        orderString: '[{"id":35},{"id":34},{"id":32},{"id":30},{"id":28},{"id":24},{"id":17},{"id":15},{"id":3}]',
        newArrayString: '[34, 35, 32]',
    },
    computed: {
        order() {
            return JSON.parse(this.orderString);
        },
        newArray() {
            return JSON.parse(this.newArrayString);
        },
        result() {
            //  Make a copy to prevent editing the original data
            return [...this.newArray].sort((a, b) => {
        let indexA;
        for(indexA = 0; indexA < this.order.length; indexA++) {
            if (this.order[indexA].id === a) break;
        }
        let indexB;
        for(indexB = 0; indexB < this.order.length; indexB++) {
            if (this.order[indexB].id === b) break;
        }
        if (indexA > indexB) return 1;
        if (indexB > indexA) return -1;
        return 0;
    })
        }
    },
})

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <p>
        Order:
        <textarea v-model="orderString"></textarea>
    </p>
    <p>
        NewArray:
        <textarea v-model="newArrayString"></textarea>
    </p>
    <p>
        Result:
        {{ result }}
    </p>
</div>

Mihai Alexandru-Ionut · Accepted Answer · 2018-10-24 08:16:36Z

1

Just use sort method by passing a callback provided function. I used indexOf function in order to find the index of a specified element.

var endArray = [34, 35, 32]
var order = [{"id":35},{"id":34},{"id":32},{"id":30},{"id":28},{"id":24},{"id":17},{"id":15},{"id":3}]

var orderIds = order.map(({id}) => id);
endArray.sort((a,b) => orderIds.indexOf(a) - orderIds.indexOf(b));
console.log(endArray);

edited Oct 24, 2018 at 8:16

answered Oct 24, 2018 at 8:09

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Comments

ZaidRehman · Accepted Answer · 2018-10-24 08:18:56Z

-1

function compare(a,b) {
  if (order.indexOf(a.id) > order.indexOf(b.id))
    return -1;

  if (order.indexOf(a.id) < order.indexOf(b.id))
    return 1;

  return 0;
}

endArray.sort(compare);

Looks like you're looking for the sort function on an array. Basically, you create a comparer and pass the function to the sort function.

In your situation, you would include logic to check/compare the values against the order array, in the comparer.

More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

edited Oct 24, 2018 at 8:18

ZaidRehman

1,7612 gold badges19 silver badges32 bronze badges

answered Oct 24, 2018 at 7:51

Olaf

1,1328 silver badges20 bronze badges

3 Comments

Ferrybig Over a year ago

where did the last_nom variable in your answer came from? its not inside the question.

Olaf Over a year ago

My bad, used an example I had available in an editor.

Ferrybig Over a year ago

in your new example you seem to have confused the the contents of newArray and order, newArray is a list of numbers, orderis a list of objects containing a key-value pair: id: number

Collectives™ on Stack Overflow

Vue: sort array based on object order

5 Answers 5

4 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related