[Vuejs]-Getting data with Axios from .json in a vue loop

by

-1👍

✅

What do you mean by "Get the data from the JSON into the const"??

Just a reminder, a constant cannot be modified.

According to what you commented, I guess that you’d like to store the data fetched from your json file to info variable. And then, render your links in the navigation bar.

mounted() {
    axios
       .get("http://localhost:8000/posts.json")
       .then((response) => (this.info = response));
}

Once the component is mounted you’re fetching your JSON data from the file using Axios. When the promise is accepted then you store the response data to this.info. Once you have your data in that variable you can render everything ⬇️

There’s a directive in VueJS for list rendering called v-for. You can use it to render all the links to your navigation bar.

<ul id="navigation-bar">
    <li v-for="i in info">
        <a href="{{ i.url }}"> {{ i.title }} </a>
    </li>
</ul>

Leave a comment