[Vuejs]-Displaying multiple jsons in VUE

by

0👍

To bind the data you have to declare first items: {books:[],authors:[]}

Also you are overwriting this.items use this.items.books and this.items.authors to assign.

Below is the example which works without ajax 

new Vue ({
  el: "#app",
  data() {
    return {
      items: {books:[],authors:[]}
    };
  },

  created: function() {
    this.items.books = this.makeAjaxCall("books", "get");
    this.items.authors = this.makeAjaxCall("authors", "get");
  },

  methods: {
    makeAjaxCall:function(url, methodType){
      if(url == 'books'){
        promiseObj= [{name:'name11',author:'author11',genre:'genre11'},{name:'name12',author:'author12',genre:'genre12'}]
      }else{
        promiseObj= [{name:'name22',author:'author22',genre:'genre22'}]
      }
      return promiseObj;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>

  <div id="app">
    <table class="booksTable">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Genre</th>
          <th>Image</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items.books" :key="item.name">
              <td>{{item.name}}</td>
              <td>{{item.author}}</td>
              <td>{{item.genre}}</td>
              <td><img :src="item.imageUrl"></td>
        </tr>
      </tbody>
    </table>
    <table class="authorsTable">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Genre</th>
          <th>Image</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items.authors" :key="item.name">
              <td>{{item.name}}</td>
              <td>{{item.author}}</td>
              <td>{{item.genre}}</td>
              <td><img :src="item.imageUrl"></td>
        </tr>
      </tbody>
    </table>
  </div>

0👍

So I found the answer, after millions of tries and it’s pretty simple.

<script>
import './styling.scss'
export default {
  name: "app",
  data() {
    return {
      items: {books:[], authors:[]}
    };
  },

  created: function() {
    this.makeAjaxCall("books.json", "get").then(res => {
        this.items.books = res.books;
        return res;
    }),

    this.makeAjaxCall("authors.json", "get").then(res => {
        this.items.authors = res.authors;
        return res;
    })
  },

  methods: {

    makeAjaxCall:function(url, methodType){
      var promiseObj = new Promise(function(resolve, reject){
          var xhr = new XMLHttpRequest();
          xhr.open(methodType, url, true);
          xhr.send();
          xhr.onreadystatechange = function(){
          if (xhr.readyState === 4){
            if (xhr.status === 200){
                //alert("xhr done ok");
                var response = xhr.responseText;
                var respJson = JSON.parse(response);
                resolve(respJson);
            } else {
                reject(xhr.status);
               //alert("xhr failed");
            }
          } else {
            //alert("xhr processing");
          }
      }
      //alert("request sent succesfully");
    });
    return promiseObj;
    }

  }
};
</script>
<template>
  <div id="app">
    <table class="booksTable">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Genre</th>
          <th>Image</th>
          <th>Availability</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items.books" :key="item.name">
              <td>{{item.name}}</td>
              <td>{{item.author}}</td>
              <td>{{item.genre}}</td>
              <td><img id="imageBook" :src="item.imageUrl"></td>
              <td>
                <button class="btn add"> Add</button>
                <button class="btn edit"> Edit</button>
                <button class="btn delete"> Delete</button>
              </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

Leave a comment