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
– Bert, Commented Oct 2, 2017 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
– Angel Miladinov, Commented Oct 2, 2017 at 14:40
Can you post request payload and response for "axios.post(app.addToCartRoute)" from browser network call — prabhatojha
– prabhatojha, Commented Oct 2, 2017 at 14:57

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 2, 2017 at 17:16

asemahle

20.8k4 gold badges42 silver badges38 bronze badges

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

2 Comments

th3n3wguy Over a year ago

This is the correct solution, in case anyone else comes across this question.

Angel Miladinov Over a year ago

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

Collectives™ on Stack Overflow

vue js DO NOT sort array by keys

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related