Retrieve data from a JSON file URL using a GET request and save the response to be accessed globally when the Vue.js application is initialized

Consider this scenario - I have a Vue.js component where I need to display the name of a user based on their ID. The only information I have is the user's ID. However, I also have a JSON file URL that contains all the user objects with their names and IDs. This allows me to retrieve the user's name by matching their ID.

Currently, I am making a GET request to the JSON file URL when the Vue.js component is mounted. Once the request is successful, I store the response and use a function to retrieve the user's name based on their ID.

However, I have encountered some issues with this approach:

  • Every time the component is reloaded, a new GET request is made to the JSON file URL.
  • I can only access the response from the GET request within this specific component. I need to access the JSON data from other components as well, which would require duplicate GET requests to the same JSON file.

I believe storing the JSON response in VUEX would be a better solution as it would allow me to access the data from any component. However, I am unsure where to place the GET request to the JSON file in this case.

Is there a specific location in Vue.js where I can initiate the GET request so that it is executed every time the Vue.js application is launched, but not more than once?

javascriptvue.jsvuejs2vue-component

Answer №1

Yes, definitely consider using Vuex to tackle this issue as it is the most suitable solution.

In the scenario where you are developing in a vue-cli project, you have the option to make the initial request in either

  1. main.js
  2. App.vue (at the top level component, inside the created hook)

Both approaches are effective, just ensure that you save the user information to Vuex after making the request.

My suggestion would be to go with App.vue as it allows you to set up a spinner or loading icon to indicate that the user data is being fetched, especially if the loading process takes a considerable amount of time.

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

Adding a unique logo to your Vue + Laravel project

Greetings! I am relatively new to working with Vue and Laravel. While setting up the registration and login pages using LaravelBreeze + Vue, I noticed that the blade files seemed redundant as everything was done with Vue files. I am currently trying to rep ...

laravelvue.jsvuejs3laravel-10

"Concealing specific routes in Vue Router depending on a certain condition - what's the

I need to determine which routes to hide based on a condition that evaluates to true or false. I have a collection of routes, such as: - Products - Clients For instance, if a user logs in but does not have the permission to edit products, then the updated ...

javascriptvue.jsvue-router

Implementing the onClick function for the correct functionality in a ReactJS map component

I have designed a mockup and now I am trying to bring it to life by creating a real component. View my component mockup here Starting with something simple, I created 3 buttons and an array. However, when I click on any button, all features are displayed ...

javascriptarraysreactjs

How to arrange three buttons in a row using CSS styling

After reviewing similar issues posted by others, I have not found a solution to my problem. Despite trying the suggested solutions, I am unable to center two buttons representing different departments on my webpage. Here is my source code: <script ...

javascriptjqueryhtmlcss

Is it necessary to generate a file for each API in Next.js?

When working with Next.js, it is common practice to create a separate file for each new API endpoint. For example, for the /user endpoint, there would be a user.js file with its own handler, and another one for /user/goldmember. Some may argue that this ...

javascriptnext.js

What are the steps for integrating an external API into a React project?

Apologies for any potential repetition, as this question may be commonly asked. I am currently working with React, Express, CORS, node, and postgres databases. My objective is to utilize the following API to retrieve real-time prices for metals: https://me ...

javascriptnode.jsrestexpresscors

In the matrix game, if a user chooses two balls of the same color, those two matching color patterns will be eliminated

I am currently working on a matrix game with the following condition: When a user selects two balls of the same color, they will destroy the two patterns with the same color. I have successfully implemented horizontal and vertical selection. However, I ...

javascriptcocos2d-xcocos2d-js

Utilizing Vue.js for Keyboard Binding

I'm brand new to coding and Vue, and I've hit a roadblock in my project. I'm creating a JavaScript calculator that needs to be usable both with a mouse and keyboard. While I've managed to make it work with the mouse, I just can't ...

javascriptvue.jscalculator

Store text in a table format in your local storage

I need help figuring out how to save product and price information to local storage when an "add to cart" button is pressed. Can someone provide guidance on how to do this? Here is the code I currently have: body> <!-- Header--> ...

javascripthtmljquerycsslocal-storage

Ways to include multiple pieces of data in a JQuery Mobile List view

Obtaining JSON data (list of available Hotels within a certain distance) and extracting the following information in JSON format: Name of Hotels, Distance of Hotel from our current location, number of rooms. There might be multiple Hotels within the specif ...

javascriptandroidjqueryjsoncordova

What is the best way to implement a scroll-into-view feature for a newly added list item in Vue.js?

I am currently utilizing vueJS to create a task viewing application. My goal is to make the div containing the list focus on the newly added list item immediately after adding a new task. Here's the HTML code from my template for the task list: < ...

javascriptvue.js

Using RabbitMQ in a Node.js application to illustrate an example of header exchange

I've been on a quest to find an example of using RabbitMQ with Node.js for a headers exchange. If anyone could guide me in the right direction, I would greatly appreciate it. Here's what I've managed to put together so far: The publisher me ...

javascriptnode.jsexpressrabbitmqamqp

Using Angular JS, filter the ng-repeat to only display items that have a specific property

I have a data file that contains keys such as: [ { "message": "Verify envelopes are properly loaded.", "hasFigure": false, "figureX": 0, "figureY": 0 }, { "message": "Ensure the paddle is in the down position.", "hasFigure": true, "figureX ...

javascriptangularjsangularjs-ng-repeat

Increase the number of table rows as you scroll downwards

Hello everyone! I've been searching online for information on how to implement infinite scrolling in a table, but all I found were tutorials using divs. Can someone please provide guidance on how to achieve this? Perhaps a sample code snippet or tuto ...

javascriptphpajax

Is there a way to showcase the data of each table row within the tr tag in an Angular 8 application?

I have been developing an application using Angular 8. The employee-list component is responsible for presenting data in a table format. Within the employee-list.component.ts file, I have defined: import { Component } from '@angular/core'; impo ...

javascriptangulartypescript

Utilize the body tag to divide elements in ReactJS

Is there a way to assign different body tags to specific components? For example, I want to apply one body tag to the dashboard component and a different one for the sign up page component. ...

javascripthtmlcssreactjs

Using Jquery, Javascript, or Ajax to deactivate the iframe by clicking on it

Whenever a link in an iframe is clicked, I need to close the iframe and div elements. I have seen websites that are able to achieve this functionality, but I can't remember the specific URLs. A while ago, I copied this code from a website to detect ...

javascriptjqueryhtmlajax

Executing a cross-site scripting (XSS) simulation within a MVC4 application on Visual Studio 201

Within my MVC 4 application, I am experimenting with simulating an XSS attack. The setup involves a button and a text box that simply outputs the entered value. However, when I input <script>alert('xss')</script> into the text box, an ...

c#javascripthtmlasp.net-mvc

Encountering an Issue when Registering New Users in Database using Next.js, Prisma, and Heroku

Currently, I am immersed in my inaugural full-stack app development project, which is aligning with an online course. Unfortunately, I have encountered a major stumbling block that has persisted despite hours of troubleshooting. The issue arises when I try ...

javascriptherokunext.jsprismaheroku-postgres

Absence of receiving any HTTP error codes when making REST calls

In our application, it is crucial to differentiate between 400 and 500 range error codes for distinct processes. Let's consider three REST calls: The first returns a status code of 200, the second returns 401, and the third returns 502 Initially, ...

javascriptajaxrestaurelia