I'm trying to make a simple webpage in Vuejs.

I have a Main.vue page, which has an import of a json file, and this json file contains certain parameters. One of them is an object array, each of its elements has a string indicating the page to be shown next in a sequence. The page also fetches data from that object. So, the Main.vue can access to every field and object of the json file file and shows the pages (page1, page2, page3...) in a sequence, depending on the information stored at that object array.

These pages (page1, page2, page3...) need to be generic, with no reference to a specific json file, and need to show information from that specific object of the array of the json.

I know how to pass data to pages via URL (so, for example, "page1" knows which element of the array has to fetch info from because Main.vue specifies it in the URL) but I don't know how can I make MyJson accesible to "page1", "page2" without making an import sentence of MyJson in each page.

I do not have backend or something similar, just a frontend which executes entirely in the browser.

I was wondering whether there is any way of accessing MyJson from page1, page2, page3... without having a backend.

Many thanks in advance

Regards

Miguel

I have tried it by passing info via URL, but it didn't work out as expected.

PS: This is my json

MyJson.json
{
    "id"="whatever"
    "text"="whatever"
    "myArray"=[
        {
            "whichPageHasToRenderMe"="page1"
            "myData"= ...
            ...
        },
        {
            "whichPageHasToRenderMe"="page2"
            "myData"= ...
            ...
        },
        {
            "whichPageHasToRenderMe"="page1"
            "myData"= ...
            ...
        },
        {
            "whichPageHasToRenderMe"="page1"
            "myData"= ...
            ...
        }   
    ]
}

2 Answers

0
User 28 On

If you serve your json file as static file. You can use fetch api or any other fetch library to access your json file.

fetch('path/to/your.json')
  .then(response => response.json())
  .then(data => {
    // do something
  })

See more about Fetch API.

In case you want to pass some json data as url query. Don't forget to use encodeURIComponent or btoa to escape some special characters.

window.open('/some/path?data=' + encodeURIComponent(JSON.stringify(data)))
0
Community On

I have solved it by using Vuex and setting the JSON in the state of Vuex, so it can be accessible from other pages.