Reverse JSON data in Vue.JS using reverse()

Question

I need to reverse the order of a JSON feed that is being used within a Vue.JS project.

In other frameworks the reverse() function has done the job. I have tried adding to the Vue.JS script but no joy yet.

Any ideas on other syntax I could try?

<script type="text/javascript">
new Vue({
    el: '#vueapp',
    data: {
        json: null
    },
    created: function () {
        var _this = this;
        $.getJSON('https://www.example.com/myfeed.json', function (json) {
            _this.json.reverse() = json;
        });
    }
});
</script>

So the last item in the JSON (the house on the side of the mountain in the example below), will display first when the page loads the JSON data.

https://jsfiddle.net/5kt9jurc/3/

Some Googling seems to show reverse() no longer works with Vue2 and is deprecated.

You want to reverse the json string? Why would your json string be backwards? Or do you want to reverse the order of a list inside the json? If so, parse the json, extract the list and then sort it. — Luan Nico
– Luan Nico, Commented May 21, 2018 at 15:50
I need the last entry in the JSON to be the first object to render. As reverse() seems to be a standard JS function I assumed that would work in Vue. Or perhaps Lodash could do something similar which seems a popular option for arrays — Gracie
– Gracie, Commented May 21, 2018 at 15:54
Possible duplicate of How to reverse an object in javascript? — Daniel Beck
– Daniel Beck, Commented May 21, 2018 at 16:15
Did you mean to write _this.json = json; json.reverse()? If the data is an array it will work. The point is, your syntax (assignment to a function call) doesn't make sense, and also reverse() doesn't return anything, it changes the array in place. — Frax
– Frax, Commented May 21, 2018 at 16:42
The code from Luan and Kirill seems to do the job, jsfiddle.net/6fnot2Lk — Gracie
– Gracie, Commented May 21, 2018 at 16:50

soeik · Accepted Answer · 2018-05-21 16:49:45Z

0

You can reverse an array. Take a look at my fiddle. I replaced getJSON with fetch to use promises. Also you don't need to do var _this = this; It looks a bit weird. Since in Vue.js properties are reactive you can just set a value.

Here is a code:

const app = new Vue({
  el: '#app',
  data: {   
    items: []
  },
  created: function() {
    fetch('https://api.jsonbin.io/b/5b02b2bbc83f6d4cc7349a7b')
      .then(resp => resp.json())
      .then(items => {        
        this.items = items.reverse()
      })
  }
});

edited May 21, 2018 at 16:49

answered May 21, 2018 at 16:22

soeik

9256 silver badges15 bronze badges

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

2 Comments

Gracie Over a year ago

The fiddle just looks like the original. I tried that new get function with no joy. Could you check your fiddle?

soeik Over a year ago

@Gracie, oh, really. Forgot to click 'update' maybe. Fixed link.

Luan Nico · Accepted Answer · 2018-05-21 16:00:54Z

0

I think what you want is something like this:

_this.json = json.reverse();

That is, assuming json is an already parsed json array. Otherwise, first parse the json string:

const array = JSON.parse(jsonString);
this.data = array.reverse();

The way you are doing you are trying to assign a value to the result of an expression, which doesn't make much sense (right side values can't be assigned to).

answered May 21, 2018 at 16:00

Luan Nico

6,0533 gold badges33 silver badges63 bronze badges

2 Comments

Gracie Over a year ago

This seems to do the job. I did see on one or two results that reverse() was deprecated. Such as this stackoverflow.com/questions/37638083/… Do you think reverse() is ok to use in Vue 2?

soeik Over a year ago

@Gracie This question and answer has nothing to do with Array.reverse() method, but it's about Vue.filter(). So don't worry. You can always check wether some method is deprecated or not in documentation: developer.mozilla.org/ru/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Reverse JSON data in Vue.JS using reverse()

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related