Is there a way to import information from a .json file into a Vue.js application hosted on a CDN?

I have a JSON file that contains information like this:

{
       "title": "A"
       "name": "B"
},
{
           "title": "C"
           "name": "D"
},

Now, I need to integrate this data into my Vue.js application. Manually copying the content works fine:

<script>
  
  new Vue({
    el: '#app',
    data: {
      items: [
    {
           "title": "A"
           "name": "B"
    },
    {
         "title": "C"
         "name": "D"
    },
    ]

Is there a way to load this JSON data directly into my Vue app without having to copy it by hand?

(Please note that I am using the CDN for Vue.js and traditional "import" methods won't work in this case.)

Answer №1

You might consider implementing something similar to the following:

new Vue({
    el: '#app',
    data: {
        items: null
    },
    created() {
        axios
            .get('./myJson.json')
            .then(response => {
                this.items = response.data;
            })
            .catch((e) => {
                console.error(e)
            })
    }
});

To use Axios, you can include it via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js"></script>

Also, ensure that your JSON data is correctly structured:

[
  {
    "title": "A",
    "name": "B"
  },
  {
    "title": "C",
    "name": "D"
  }
]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to extract data from a JSON file to easily iterate through each element

The following String is retrieved from the WebService response. { "tag": "fetchdwnDetailStatus", "status": true, "downloadDetails": "[\"[9164666666, 20171001, MADAN LAL CHOURISYA, 16, 1342.6]\",\"[9868476619, 20171001, RAHUL JAI ...

Populating an array during an event and then utilizing it outside of the event function handler

I have a challenge where I need to populate an array with values from various buttons whenever they are clicked. The goal is to then access this array outside of the event handler function. Although I have attempted a solution, I am struggling to access th ...

Provide net.socket as a parameter

What is the best way to pass the net.socket class as an argument in this scenario? Here's my code snippet: this.server = net.createServer(this.onAccept.bind(this)); this.server.listen(this.port); } Server.prototype.onAccept = function () { // Ho ...

Retrieving a database value in Node.js Firestore containing a space

Hello, I'm just getting started with node Js and I anticipate that it will be a smooth ride! Currently working on an application using node JS with Firestore where I need to retrieve data like "display name": James and "Age": 22 Since Age does not h ...

Tips for troubleshooting my website?

After making some updates to my website, I noticed that an ajax script is no longer functioning properly. Since I hired someone else to write the code, I'm not sure how to troubleshoot it. Initially, this is what it should look like: When you select ...

Utilizing Jcrop to Crop an Image that has been Uploaded

Currently, I am working on cropping an uploaded image using Jcrop. My goal is to enable the user to crop the image upon uploading it without storing the original image on the server. Instead, only the cropped part selected by the user via Jcrop will be sav ...

Is it possible to first match a named route and then a dynamic route in Express.js?

app.get('/post/create', create_post); app.get('/post/:slug', view_post); When trying to access /post/create, I expected the view_post function not to run. However, it still matches because "create" can be considered the value for :slug ...

PhpStorm struggles to interpret custom tags accurately

Unexpectedly, PhpStorm seems to be struggling with recognizing custom tags, leading to incorrect code formatting. Currently working on a .vue file, here is a brief example of how the code should appear: <template> <auth-layout> &l ...

Importing a group of modules within the ECMAScript module system (ESM

I am working with a collection of folders, where each folder contains an index.js file that I want to import. modules/ ├── moduleA/ │ └── index.js └── moduleB/ └── index.js How can I accomplish this using ESM? Is it possib ...

Discovering the true hard link URLs

Currently, I am conducting research on a specific topic. I have noticed that some websites are developed using JavaScript, such as . One interesting aspect I have observed is that when clicking on the paging, the URL remains the same while the page conte ...

Simple React application

I'm delving into the world of ReactJS, trying to create a simple webpage with it. However, as a beginner, I seem to have encountered an issue with the code snippet below. It's not functioning correctly, and I can't figure out why. Can someon ...

Frequency-focused audio visualization at the heart of the Audio API

Currently, I am developing a web-based audio visualizer that allows users to adjust the raw audio signal visualizer to a specific frequency, similar to the functionality found in hardware oscilloscopes. The goal is for the wave to remain stationary on the ...

Exploring Multilingual Autocomplete or: Best Practices for Managing Multiple Languages in Web Applications

I'm currently developing a website and I have a mysql-table named 'items' with the following structure: item_id | item (The second column is used to identify the item_id.) In a file called language1.php, I have an array that stores the it ...

Attempting to minimize the repetition of code in Redux by implementing some utility functions

Is there a potential issue with the method I'm attempting in this URL: The concept involves altering only the actions file when introducing a new action. One improvement I am considering is recursively merging the status passed from the actions with ...

What method would you recommend for constructing a user model in SwiftUi?

Currently, I am working on creating a model to handle user data retrieved from an API. The data is in JSON format and has a specific structure. https://i.sstatic.net/8C8GB.png This is how I have organized my User Model: User Model class: https://i.ssta ...

AngularJS - akin to "live updates" in HTTP requests

Currently, I am working with AngularJS 1.3 and my backend only supports HTTP requests (no WebSockets). What would be the most effective solution for achieving "real-time" data updates? I am currently using $interval to send an HTTP request every second, b ...

Converting a Pandas dataframe to JSON format: {name of column1: [corresponding values], name of column2: [corresponding values], name

I'm a beginner in Python and pandas. I've been attempting to convert a pandas dataframe into JSON with the following format: {column1 name : [Values], column2 name: [values], Column3 name... } I have tried using this code: df.to_json(orient=&apo ...

The button is functioning properly, however, the unit test is indicating an issue

I have implemented a button on the page that increments a counter when clicked: <template> <div> <span id='count'>{{count}}</span> <button @click="increment">+</button> </d ...

Retrieving information from Prismic API using React Hooks

I'm having trouble querying data from the Prismic headless CMS API using React Hooks. Even though I know the data is being passed down correctly, the prismic API is returning null when I try to access it with React Hooks. Here is my current component ...

Using Regex with JavaScript while ignoring letter case

I am trying to extract a query string from my URL using JavaScript, and I need to perform a case-insensitive comparison for the query string name. In order to achieve this, here is the code snippet that I am currently using: var results = new RegExp(&apos ...