VueJS2 sort JSON array

Question

I am trying to sort a JSON array from JSON file a.json.

The array is coming like this:

{"data":
    [
      {"exception":"",
      "name":"Data Server1",
      "alias":"TOR-Server",
      "delayed":"NO",
      },
      {"exception":"",
      "name":"Data Server2",
      "alias":"FRA-Server",
      "delayed":"NO",
      }
    ]

I need to sort the data by the "alias name", coming from the JSON file with Vue JS.

This is my Javascript Code for the display in Vue JS

<script type="text/javascript">

    var app = new Vue({
    el: '#app',
    data: {
    json: null
    },

     computed: {

      sorted: function() {
            setTimeout(function() {
            var app = this.app.json
            if (app.length >= 6)
            return app;
              }, 5000);
            }
    },

    methods: {
        toggleClass(){
            if (this.failed == true){
                this.failed = false;    
            }
            else
            {
                this.failed = true; 
            }
        }
    }

But the Sorted function is not working and if I try to display the servers in the sorted array, I receive a blank page.

And my for loop in the HTML page is:

<div class="mainbutton" v-for="(server, index) in json.data ">

Hope this makes sense and I could get it working.

Nisarg Shah · Accepted Answer · 2017-10-28 15:12:40Z

1

You can use Array.sort inside a computed, to return the sorted array.

For example, to sort the array's items by name property, you can call: this.json.sort((t1,t2) => t1.name < t2.name ? -1 : 1).

Here's a working snippet:

var app = new Vue({
  el: '#app',
  data: {
    json: [
      {
        "exception": "",
        "name": "Data Server3",
        "alias": "TOR-Server",
        "delayed": "NO",
      },
      {
        "exception": "",
        "name": "Data Server1",
        "alias": "TOR-Server",
        "delayed": "NO",
      },
      {
        "exception": "",
        "name": "Data Server2",
        "alias": "FRA-Server",
        "delayed": "NO",
      }
    ]

  },

  computed: {
    sortedJson: function() {
      return this.json.sort((t1,t2) => t1.name < t2.name ? -1 : 1);
    },
    sorted: function() {
      setTimeout(function() {
        var app = this.app.json
        if (app.length >= 6)
          return app;
      }, 5000);
    }
  },

  methods: {
    toggleClass() {
      if (this.failed == true) {
        this.failed = false;
      } else {
        this.failed = true;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<div id="app">
  <div class="mainbutton" v-for="(server, index) in sortedJson ">
    {{server.name }}
  </div>
</div>

answered Oct 28, 2017 at 15:12

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

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

2 Comments

Phoenix Over a year ago

Hello, Thank you for the nice snipped, it works. Although I see all the array is now sorted, I do not know how do I set a timeout for the Vue JS v-for loop, because we need first to wait for the data to be loaded from the JSON file, then sort the data and then get the sorted array and display it? How do I set a timeout for the v-for loop?

Nisarg Shah Over a year ago

@Phoenix You don't really have to wait for that. Either the file is loaded synchronously, in which case the array is sorted only after that. Or, if the file is loaded asynchronously, in which case you should sort the array when the promise resolves.

Collectives™ on Stack Overflow

VueJS2 sort JSON array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related