vue js DO NOT sort array by keys

Question

I have made a shopping cart with vue js and want to keep products displayed in the order they have entered. The problem is the products are associative arrays with their id's used for keys something like [1 => ['name' => 'product1', 'price' => 100', 'quantity' => 1]] Where the key 1 is the id of the product. The problem is when I return the cart object as json that the products array is ordered by default by view by it's keys. Here's my code:

let app = this 
axios.post(app.addToCartRoute, {
    _token: '{{ csrf_token() }}',
    product_slug: slug
})
.then(function(response) {
    if(!app.showCart) {
        setTimeout(() => {
           app.cart = response.data
        }, 250)
    }
    else {
        app.cart = response.data
    }
        app.showCart = true
        console.log(response.data)
})
.catch(function(error) {
    console.log(error)
})

Let's say I first add product with id 3 to the cart the array looks like this: [3 => ['name' => 'product3', 'price' => 15.00]] and then I add product with id 1 the array starts looking like this: [1 => ['name' => 'product1', 'price' => 13.00], 3 => ['name' => 'product3', 'price' => 15.00]] I dont want that but vue js seems to order them by default. How to avoid that?

If the order they were added to the cart is important, you should store the order as a property of the object as they are added. — Bert, Oct 02 '17 at 14:39
@chiliNUT I've checked it, the server side json which is returned is okay, it's vue js that reorders them — Angel Miladinov, Oct 02 '17 at 14:40
Can you post request payload and response for "axios.post(app.addToCartRoute)" from browser network call — prabhatojha, Oct 02 '17 at 14:57

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

Borrowing from another stackoverflow answer:

Javascript doesn't have "associative arrays" the way you're thinking of them. Instead, you simply have the ability to set object properties using array-like syntax, plus the ability to iterate over an object's properties.

The upshot of this is that there is no guarantee as to the order in which you iterate over the properties...

In other words, Vue does not reorder your data. Rather, response.data is an object, and Javascript objects do not have the same concept of "order" as PHP associative arrays.

If the ordering of products is important, then you should associate each product with a position. Then, to display them, you can order them using that positional information.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 02 '17 at 17:16

asemahle

20,235
4
40
38

This is the correct solution, in case anyone else comes across this question. – th3n3wguy Oct 03 '17 at 05:37
I fixed it by adding '_' in front of the key so the keys now look like this: '_3', '_5' and so on and it no longer reorders them – Angel Miladinov Oct 03 '17 at 12:25

vue js DO NOT sort array by keys

1 Answers1