Json data not showing in vuejs

Question

I am making a vue app. I put a .json file in static directory. I am trying to read it in the default HelloWorld.vue file. But it's not showing in the browser. Here is what it shows in the browser:

My json file looks like this:

{
    "status": "success",
    "message": "Successfully retrieved all registered applications",
    "Applications": [
        {
            "ApplicationID": "74382DOD",
            "ApplicationName": "OIMInstance2",
            "ApplicationType": "OIM",
            "APIToken": "ZM8R4FRiZWWKbl235u06zbArCdOBPlEKhqHQO8Y9RJ2HgBPC+cZgbIli8fFuNZaey/2tJciJuILIWIn24WTjGA=="
        },
        {
            "ApplicationID": "943ODA6G",
            "ApplicationName": "LDAPInstance2",
            "ApplicationType": "LDAP",
            "APIToken": "R9lDEW5dnN6TZg2sefEEzS6LWMNmFh4iLHMu47LmAsusHl0bZuh2rktSlXqSZRdHHEWq7sP4Xsdy6xNtDYE8xw=="
        }
    ]
}

My code in HelloWorld.vue is:

<template>
  <div>
    <h1>APPLICATION REGISTRATION</h1>
    <div v-for="udata in userData">
      Id : {{ udata.ApplicationID }}
    </div>
  </div>
</template>

<script>

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

export default {
  name: 'HelloWorld',

  data () {
    return {
      userData: []
    }
  },

   created: function() {
    axios.get('../../static/mockdata.json')
    .then(response => {
      this.userData = response.data
    })
    .catch(e => {
      //this.errors.push(e)
    })
   }
}
</script>

Is there anything wrong with my code? How do I show the json data in the browser?

Why are you using axios if you could only import the file? considering it is going through the loop the problem is the data returned and how you are making a reference.. Prob the attribute is returning undefined. — Cleriston
– Cleriston, Commented Mar 19, 2019 at 5:25
just try to console userData in callback of axios. data is comming in a proper way or not — Sanjaysinh Zala
– Sanjaysinh Zala, Commented Mar 19, 2019 at 5:28
if data comes in proper way in axios you can try that axios call in beforeMount() method or in mounted() method — Sanjaysinh Zala
– Sanjaysinh Zala, Commented Mar 19, 2019 at 5:30

Riddhi · Accepted Answer · 2019-03-19 05:47:20Z

1

You need to iterate through applications object.Hence in order to get applicationId you will need to set data accordingly by only adding applications data in your userData variable.

Do as below.

 this.userData = response.data.Applications

answered Mar 19, 2019 at 5:47

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Json data not showing in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related