CODEWITHSUNDEEP
javascriptjqueryvue.jsvue-component
Wanderer
Wanderer

Reputation: 705

How can I display the JSON data in an inner array by using vueJS?

My vueJS code is:

<script>
  new Vue({
    el: '#feed' ,
    data: {
      data: [],
    },
    mounted() {
      this.$nextTick(function() {
        var self = this;
        var id = window.location.href.split('=').pop();
        console.log(id);
        $.ajax({
          url: "https://n2s.herokuapp.com/api/post/get/5",
          method: "GET",
          dataType: "JSON",
          success: function (e) {
            if (e.status == 1) {
              self.data = e.data;
              console.log(e.data)
            } else {
              console.log('Error occurred');
            }
          }, error: function(){
            console.log('Error occurred');
          }
        });
      });
    },
  })
</script>

This is my html code to display values

<div class="m-single-article" id="feed">
  <p>{{details.businessName}}</p> //already printed
  <p>{{details.pid}}</p> //already printed
  <p>{{details.inventory}}</p> //////NOT PRINTING
  <p>{{details.sub_category}}</p> ////// NOT PRINTING
</div>

I AM ABLE TO PRINT ALL THE DATA expect INVENTORY AND SUBCATEGORY. please

The url will provide the json data as:

{"status": true, "data": {"pid": 10, "businessName": "Ey technology", "services": "1, 3, 4, 2", "inventory": ["specs", "Eye Testing", "Lens", "Doctors"], "workHr": "Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM", "description": "Good technology company for software", "category": 1, "sub_category": ["Homeo pathy", "Web development"], "lat": 9.5274336, "lon": 76.8224309, "contactName": "simon", "contactEmail": "[email protected]", "contactOfficeAddress": "korno solutions", "contactNumber": "1236547859", "contactOfficeNumber": "858547896", "state": "Canada", "city": "Oranto", "place": "Orania", "pincode": 895621, "referer": 24, "link": 24, "views": 0, "package": 1, "listing_pic": "default", "website": "www.ey.com"}}

By trying this I am not able to display the values of inventory [] and subcategory []. Can anybody please help me to solve my issue.

Also I am getting services as 1,2,3,4. Is there any way to map to the another json data giving name of the services. https://n2s.herokuapp.com/api/post/get_all_services/

Upvotes: 0

Views: 82

Answers (1)

zivce
zivce

Reputation: 464

You need v-for. 

new Vue({
  el: '#feed' ,
  data: {
    details: [],
  },
  mounted() {
    this.$nextTick(function() {
      var self = this;
      var id = window.location.href.split('=').pop()
             console.log(id)
      $.ajax({
            url: "https://n2s.herokuapp.com/api/post/get/5",
            method: "GET",
            dataType: "JSON",
            success: function (e) {
                if (e.status == 1) {
                    self.details = e.data;
                    console.log(e.data)
                }
                else
                {
                    console.log('Error occurred');}
            }, error: function(){
            console.log('Error occurred');
            }
        });
    })
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m-single-article" id="feed">
<p>{{details.businessName}}</p> 
<p>{{details.pid}}</p>
<p v-for="inv in details.inventory">{{inv}}</p>
<p v-for="sub in details.sub_category">{{sub}}</p>
</div>

Upvotes: 1

Related Questions