0

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.

Gracie
  • 896
  • 5
  • 14
  • 34
  • 1
    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 May 21 '18 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 May 21 '18 at 15:54
  • Possible duplicate of [How to reverse an object in javascript?](https://stackoverflow.com/questions/36958870/how-to-reverse-an-object-in-javascript) – Daniel Beck May 21 '18 at 16:15
  • Did you mean to write `_this.json = json; json.reverse()`? If the data is an array [it will work](https://developer.mozilla.org/en/docs/Web/JavaScript/Referencje/Obiekty/Array/reverse). 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 May 21 '18 at 16:42
  • The code from Luan and Kirill seems to do the job, https://jsfiddle.net/6fnot2Lk/ – Gracie May 21 '18 at 16:50

2 Answers2

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).

Luan Nico
  • 5,376
  • 2
  • 30
  • 60
  • This seems to do the job. I did see on one or two results that reverse() was deprecated. Such as this https://stackoverflow.com/questions/37638083/how-do-i-reverse-the-order-of-an-array-using-v-for-and-orderby-filter-in-vue-js Do you think reverse() is ok to use in Vue 2? – Gracie May 21 '18 at 16:37
  • 1
    @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: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse – soeik May 21 '18 at 16:54
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()
      })
  }
});
soeik
  • 905
  • 6
  • 15