Synchronizing Data From Axios Request With Firebase Storage - Vue.js

After successfully receiving the desired response from an axios call to an API, my next task is to push that data into my Firebase Firestore. While I am confident in how to push data into Firestore, I am facing difficulty accessing the data correctly from the axios call for pushing. Here is the relevant snippet of code:

axios.get('https://somewhereontheweb.com/api/getgames', {
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'Authorization': 'Bearer ' + token,
          }
        })
          .then(response => {
            this.games = response.data;

            // Need help with pushing data into Firestore here
          })
          .catch(function (error) {
            console.log(error);
          });

While I can display the JSON array received from the API on my Vue page as an object ({{games}}), my goal is to iterate over this data and push each game entry into Firestore. Although I am proficient in writing the Firestore push code, I am struggling with looping through the response to achieve this. Any guidance on how to approach this would be greatly appreciated.

Thank you!

Answer №1

When working with a JSON string, you can utilize the following method to iterate through it and transform it into the desired data structure:

for(var item in response.data){
  response.data[item].performTask()
}

It may also be beneficial to pass the iteration process to a helper function that includes a promise for sending the data to Firestore upon completion.

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

unanticipated redirection with Vue router

Here is the routing code snippet: // exporting for component use export var router = new VueRouter(); // defining routes router.map({ 'home': { component: Home, auth: true }, 'login': { component: L ...

Testing the update functionality of meta content in the Vue Quasar Meta component using Jest

I am currently working on unit testing the process of updating meta content for a Vue & Quasar page by utilizing the useMeta component offered by Quasar. My approach to testing this involves creating a mock Vue component called UseMetaComponent, which is ...

Unable to select a date once the month view has been altered - fullcalendar

My use of the fullcalendar involves indicating the available days for ordering a courier service. Customers can select from any of the two days following today, excluding weekends (Saturday and Sunday). However, when switching to month view, it seems that ...

At what point is it necessary to generate a new vertex array object when sketching numerous objects?

I'm embarking on a game development project using WebGL. Currently, I have three textures in my arsenal- one for letters used in the font, another for character sprites, and a tilemap texture for the world. With these large textures at hand, I find m ...

Leverage the power of jQuery datetime picker in an ASP.NET content page with a repeater control

Can anyone help me with adding a javascript tag to a content page of my asp.net application? The script is working fine with html tags, but it's not functioning properly within the content. Here is the code snippet that displays a datetime picker: &l ...

Implementing conditional reduction in JavaScript arrays

I've encountered an issue with the filter and reduce methods. I am attempting to calculate the sum of "smc" values only when "A" equals 2020 from the given array below: arr = [{A:2020, smc:1},{A:2020, smc:2}, {A:2021, smc:3}] My attempted solution so ...

What is the process for assigning a random string value to each document within a mongodb collection using the mongo shell?

Looking to assign a randomly generated string property to every item in a MongoDB collection. Planning to leverage the mongo shell and the updateMany function for a swift and efficient solution. ...

Verify the presence of values in several textarea fields with jQuery before executing a specified action

My main goal is to validate multiple dynamic forms on a single page. If all textareas are either empty or contain default values, I need a specific function to be executed. However, if any of the textareas have content that deviates from the default value, ...

Extracting data from websites based on specific criteria

I'm currently extracting data from the following website: , specifically targeting span.summary-hero-name. Below is the code I am using for this task: scrapeIt("https://masteroverwatch.com/profile/pc/us/calvin-1337", { title: "span.summary-hero-na ...

Unable to transform data into ng2-chart [Bar Chart]

Exploring angular for the first time and currently working with Angular 7. I am in need of converting my api data into the ng2-charts format. This is a snippet of my api data: { "status": 200, "message": "Fetched Successfully", "data": [ ...

Plugin for jQuery that smoothly transitions colors between different classes

After searching through numerous jQuery color plugins, I have yet to discover one that allows for animating between CSS class declarations. For instance, creating a seamless transition from .class1 to .class2: .class1 { background-color: #000000 } .class ...

Angular's Reactive forms: The power of bidirectional binding

Struggling with Reactive forms? I've encountered an issue where updating the model class when a User changes the input is easy, but what about programmatically changing the model and reflecting those changes in the HTML form? In simplified terms: th ...

What is the best way to retrieve a value from $http or $resource using this filter?

Within my HTML, I have a structure that looks like {{ i.userId | userName }}. Essentially, I am attempting to convert this into a name by utilizing a filter. However, I am encountering numerous challenges with the asynchronous function required to retrieve ...

Analyzing the original data form versus the modified data

I'm dealing with a form in React that utilizes react-hook-form and the useFieldArray method for adding dynamic steps. The challenge I'm facing is how to compare the original data passed to the form with the edited data, in order to make correspon ...

The Firestore addDoc function seems to be malfunctioning and failing to save data to

I'm currently facing an issue while trying to save data to my Firestore database. Despite following the Firebase documentation, I am unable to see any data being written to the database. Although there are no console errors showing up, only a simple ...

I am working with an array of objects in React JavaScript, and I need to find a way to convert it into

Currently, I am in the process of creating this JavaScript function: export function convertArrayObjToFileDownload(data, filename, filetype = 'application/octet-stream') { const blob = new Blob(data, { type: filetype }); downloadBlob(blob ...

The ReactJS Ajax request returns a successful status code of 200 and retrieves the data, however, an error message

I have the following code snippet to fetch data from a backend API. When I paste the link into my browser's address bar, the API returns a result of '["2016-03-31T00:00:00"]'. However, when I use this AJAX call in my code, I receive a status ...

What is the best way to pass data from the server to a Vue CLI application?

I am looking for a way to connect my Vue CLI app to a server back-end. The server will send a view template along with data payload, and I need to inject that payload as JSON into the Vue app as a data property. Here is a snippet of the index.html file ge ...

How can we harmonize onmouseover and onclick events to effectively adjust div styles, while ensuring that resetting onclick styles does not interfere with onmouseover functionality?

Let me start by saying that my programming skills are quite basic. The answers to my questions may seem obvious to some, but I'm struggling to piece it all together. Thank you in advance for your help. So, here's the HTML code I'm working w ...

Utilize vue-gettext to localize text

I'm currently working on implementing translation in a Vue 2.x project using "vue-gettext". However, I've encountered an issue with certain cases like: <settings-group label="is a label" > <settings-field label="is a lab ...