How to retrive the json data array and print that value? in vue and axios.

hi buddy In my vue application. i find difficult to take out the json data and print that value. i m not able to do it. Please if you know how to print it. In my vue app using axios for https request. This is my country pincode api http://postalpincode.in/api/pincode/797112 and on the postman app my jason data are

 "Message": "Number of Post office(s) found: 12",
    "Status": "Success",
    "PostOffice": [
        {
            "Name": "Dimapur",
            "Description": "",
            "BranchType": "Sub Post Office",
            "DeliveryStatus": "Delivery",
            "Taluk": "Dimapur",
            "Circle": "Dimapur",
            "District": "Dimapur",
            "Division": "Nagaland",
            "Region": "North Eastern",
            "State": "Nagaland",
            "Country": "India"
        },
        {
            "Name": "Doyapur",
            "Description": "",
            "BranchType": "Branch Post Office",
            "DeliveryStatus": "Delivery",
            "Taluk": "Dimapur Mdg",
            "Circle": "Dimapur Mdg",
            "District": "Dimapur",
            "Division": "Nagaland",
            "Region": "North Eastern",
            "State": "Nagaland",
            "Country": "India"
        }, 
and more......

How do i get that name , state and country to print it in the view

axios.get('https://postalpincode.in/api/pincode/' + app.startingZip)
                .then(function (response) {
                  app.startingCity = response.data.PostOffice.Name + ',' response.data.PostOffice.state + ',' + response.data.PostOffice.country
                })
                .catch(function (error) {
                  app.startingCity = "Invalid Zipcode"
                })

those json data are under the array so i am not able to do it. I want to store the startingCity value as Dimapur, Nagaland, India. please help if you can will be very thankful to you...

takdw

7 years ago

Level 11

PostOffice is an array. Therefore the . operator wouldn't work. What you can do is store the PostOffice array in a Vue data property and then loop over it using v-for in your template block. It would be something like this:

<template>
    <div>
        <!-- ... -->
        <ul>
            <li v-for="postOffice of postOffices">{{ postOffice.Name }} {{ postOffice.State }} {{ postOffice.Country }}</li>
        </ul>
        <!-- ... -->
    </div>
</template>

<script>
    export default {
        data() {
            // ...
            postOffices: [],
            // ...
        },
        created() {
            axios.get('https://postalpincode.in/api/pincode/' + app.startingZip)
                 .then(response => this.postOffices = response.data.PostOffice)
                 .catch(error => console.log(error));
        }
    }
</script>

EDIT: If you just want to get the first value from the returned array, you can modify your original code to this:

axios.get('https://postalpincode.in/api/pincode/' + app.startingZip)
                .then(function (response) {
                  app.startingCity = response.data.PostOffice[0].Name + ',' response.data.PostOffice[0].state + ',' + response.data.PostOffice[0].country
                })
                .catch(function (error) {
                  app.startingCity = "Invalid Zipcode"
                });

Please or to participate in this conversation.