Getting data with Axios from .json in a vue loop

Question

In my Navigation I want to insert Links from my CMS. I am using Axios. My Navigation is Vue. How do I get the data from the JSON file into the const?

Just knowing if I need to search for the solution in Axios or in Vue would help alot too.

import axios from "axios";

const exhibitions = [
    {
    name: "Exhibition 1",
    description: "Info 1",
    href: "#",
    },

    {
    name: "Exhibition 2",
    description: "Info 2",
    href: "#",
    },    
];

my export default:

export default {
  name: "item",
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    axios
      .get("http://localhost:8000/posts.json")
      .then((response) => (this.info = response));
  },

posts.json

{
"data":
    [{
    "id":1028,
    "title":"Exhibition 1",
    "slug":"exhibition-2009",
    "url":"http://localhost:8000/exhibitions/exhibition-2009"
    },
    {
    "id":905,
    "title":"Exhibition 2",
    "slug":"exhibition-2006",
    "url":"http://localhost:8000/exhibitions/exhibition-2006"
    }],
"meta":
    {
    "pagination":
    {
    "total":2,
    "count":2,
    "per_page":100,
    "current_page":1,
    "total_pages":1,
    "links":{}
     }
     }
 }

Answer 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>