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":{}
     }
     }
 }

Does this answer your question? [how to show fetched data using axios to div in vuejs](https://stackoverflow.com/questions/67342628/how-to-show-fetched-data-using-axios-to-div-in-vuejs) — Sysix, Sep 05 '21 at 02:08
The json file shows in the Developer Tools Console. But from there I don't know how to continue. — Oli, Sep 05 '21 at 07:54

Jiahui Chen · Accepted Answer · 2021-09-08T06:26:28.087

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

edited Sep 08 '21 at 06:26

answered Sep 06 '21 at 07:02

Jiahui Chen

75
3
10

Please better explain your solution [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – Noam Yizraeli Sep 06 '21 at 07:34
Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Community Sep 06 '21 at 07:34
Thanks the info about the constant. I do understand and will try it. – Oli Sep 06 '21 at 13:05
Actually, what's what you want to achieve? – Jiahui Chen Sep 06 '21 at 16:07
@jiahui-chen I would like to load 2 infos (Title and URL) from a .json file (exported from CraftCMS) into my vue.js Navigation. – Oli Sep 07 '21 at 09:05
@jiahui-che Or can I describe it better like this: I want the links from my CMS to appear in the Vue navigation. – Oli Sep 07 '21 at 14:00
@Oli I've updated my response, I hope it helps and does what you want – Jiahui Chen Sep 08 '21 at 06:26
@jiahui-che Thank you. Yes I did this, getting back empty list items. If I give out only: {{ i }} I receive the full json. I tried many times, always this result. May be the mistake is in my json file? I will add it to my question. – Oli Sep 08 '21 at 12:26
Can you please format the JSON correctly? I mean, with all the curly braces and commas. It took me some time to decode the actual JSON. But I think you should do `info.data` in the **v-for="i in info.data"** – Jiahui Chen Sep 08 '21 at 13:53
@jiahui-chen I formatted the JSON. v-for="i in info.data" does not give the title, url back either. Can I try something else? – Oli Sep 08 '21 at 16:35
@Oli `v-for="i in info.data.data"` should render everything. But I'd recommend you to assign **this.info = response.data.data** and then render the list as I've told you in the response – Jiahui Chen Sep 08 '21 at 21:53
@jiahui-chen Yes. Now I got it. Thank you. It is showing the titles as you told. – Oli Sep 09 '21 at 04:01
Glad that it finally worked! Could you please up vote, the response it should help future readers. Thank you @Oli – Jiahui Chen Sep 09 '21 at 07:08

Getting data with Axios from .json in a vue loop

1 Answers1