Is there a way to refresh my list following a POST request when utilizing a separate endpoint?

I'm struggling with updating my list after a POST request. I haven't been able to find any solutions online. Typically, I would just push an object into an array, but it seems different in this case.

This function utilizes 2 API endpoints. The first one retrieves the list data, while the weather API uses the data from the first endpoint to fetch information about cities that match their names.

async getPreviousWeather() {
      let endpoint = "/api/";
      let promises = [];
      try {
        const response1 = await axios.get(endpoint);

        this.cities = response1.data;
        for (let i = 0; i < this.cities.length; i++) {
          const response2 = await axios.get(
            `https://api.openweathermap.org/data/2.5/weather?q=${this.cities[i].city_name}&units=metric&appid={API_KEY}`
          );
          this.infos.push(response2.data);
        }
      } catch (error) {
        console.log(error);
      }
    },

Now, this endpoint posts data obtained from the first endpoint. The issue I'm facing is how to update the list upon POST. I'm unsure of how to handle pushing new data or calling this.getPreviousWeather(); as it adds both new and previous data.

async onSubmit() {
   

      let endpoint = "/api/";
      try {
        const response = await axios.post(endpoint, {
          city_name: this.city_query,
        });
        this.city_query = null;
        this.getPreviousWeather();
      } catch (error) {
        console.log(error);
      }
    },
    created() {
    this.getPreviousWeather();
  },

Answer №1

After putting together this solution, I'm uncertain of its effectiveness though it does seem to be functioning.

methods: {
    async onSubmit() {
      let endpoint1 = `https://api.openweathermap.org/data/2.5/weather?q=${this.city_query}&units=metric&appid={API_KEY}`;
      let endpoint2 = "/api/";
      try {
        const response1 = await axios.get(endpoint1);
        const response2 = await axios.post(endpoint2, {
          city_name: this.city_query,
        });
        this.city_query = null;
        if (this.error) {
          this.error = null;
        }
        this.infos.push(response1.data);
      } catch (error) {
        console.log(error);
      }
    },

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

Automatically generated list items are failing to react to the active class

I am facing an issue with two divs in my project. The first div uses the Bootstrap class list-group and is populated with a basic example provided by Bootstrap. The second div is supposed to be populated with list-group-items obtained from an AJAX GET requ ...

I'm looking for a way to track the progress of an ajax call. Specifically, I want to know how I

I am currently working on an AJAX call that executes a lengthy PHP script producing 20 different results. I aim to display the progress of each step within the script, such as 1/20 complete, 2/20 complete, 3/20 complete. Last updated on 29-12-2015 at 03:1 ...

Inject a heavy dose of Vue into your project

**I'm trying to implement the provide/inject logic in Vue. In my 'App.vue' component, I have defined the 'firstName' input as a string "John", and I want to display this value when the child component 'Step1' is created. ...

Testing an ajax-driven website: what's the best approach?

Seeking to develop automated tests for my completely ajax-based website developed using Spring MVC/Java. I possess a basic understanding of Selenium and have managed to create some tests using this tool. The main issue lies in the fact that testing an aja ...

locate handlers for events using selenium web automation

Recently, I began exploring Selenium. Can Selenium locate event handlers connected to an HTML element? These handlers, such as onclick for a button, may be dynamically added using addEventListener. ...

What is causing only one route to be functional with the Backbone Router?

In the segment below, I have incorporated a variety of routes and view events created using Backbone.js. All the routes seem to be working as expected except for the last one 'products'. Initially, I had it set up differently but noticed that it ...

Menu secured in place within the wrapper

My website is contained in a wrapper with a max width, and I have a fixed side menu that can be toggled with a button. The problem I am facing is keeping the fixed side menu within the page wrapper. Fixed elements are typically positioned relative to the ...

The TextBox will alter its color following an incorrect submission

I am struggling to create a bootstrap form that will change the color of the borders to red after incorrect submission. The issue I am facing is that the textbox always remains in red. Does anyone have any suggestions for setting the textbox borders to red ...

What is the reason behind TypeScript enclosing a class within an IIFE (Immediately Invoked Function

Behold the mighty TypeScript class: class Saluter { public static what(): string { return "Greater"; } public target: string; constructor(target: string) { this.target = target; } public salute(): string { ...

Error encountered when referencing iscrollview and iscroll js

Greetings! I am new to the world of JavaScript and jQuery, currently working on developing a phonegap application. As part of my project, I am exploring the implementation of the pull-to-refresh feature using iscroll and iscrollview as demonstrated on & ...

Press the AngularJS button using just JavaScript and the element

I've been developing a browser extension that automatically clicks buttons on web pages, but I've run into an issue with sites using AngularJS. The code functions properly on most websites except for those built with AngularJS. Below is the snip ...

The copy-webpack-plugin is causing an error by prohibiting the use of an import statement outside of

Recently, I incorporated a JS library as a git submodule into my Vue.js project and placed it in the root directory. To import the JS file from this git submodule by adding a <script> tag to my index.html, I configured webpack to copy files using the ...

Issues with display of Vue2-leaflet LMap/LTileLayer components

Currently, I am in the process of enhancing my Vue2 learning project by integrating a map. After exploring Google Maps, I concluded that using OSM and Leaflet would be the most suitable approach. However, I have encountered an initial obstacle where the ma ...

AngularJS controllers and $scope are essential components in structuring and

As a newcomer to Angular, I've spent some time reading up on scopes and controllers, but I still feel like something isn't quite clicking for me. Let's take a look at this code snippet: var myApp = angular.module("myApp", []); myAp ...

When a single object is modified in a JavaScript array, all the elements are affected

I am working with an array of 71 objects: var data = [] This array is populated with data from a database, containing both static and dynamic elements for each object in the data. angular.forEach(returnData,function(value,index) { if(!Array.isArray(va ...

html carousel not updating in popover

I've been attempting to create a popover with a bootstrap carousel, where the carousel items are dynamically generated and appended from a script. Despite my efforts, I have successfully displayed the carousel but struggle to append the items. I' ...

How does the function window.open determine whether to open a new tab or switch to an existing tab based on specific criteria?

As I navigate through new tabs and existing tabs, I am curious about the criteria that determines whether a new tab is opened or if the browser simply reopens an existing tab with the same name. Could someone shed light on the specific parameters being co ...

Exploring the Boundaries of JavaScript Libraries

Exploring the inner workings of JavaScript libraries has been a challenge for me. Despite having some background in Java and JavaScript, I find the code below quite perplexing. These snippets are extracted from an example on david-tang.net's website. ...

Tips for organizing and nesting form data

Can I format my data in JSON like this: { attachments: { file: [ { name: 'pic1.jpg' }, { name: 'pic2.png' } ], username: 'Test', age: 1 } } Is it achievable us ...

Unable to load the node modules

In my development journey, I created an ASP.NET MVC project using Angular 2 in Visual Studio 2017 and set up node for package management. Here is a snippet from the package.json file: { "version": "1.0.0", "name": "asp.net", "private": true, ... ...