What is the best way to assign the value of an HTTP GET request to a subarray in Angular 8

Attempting to store data in a sub-array (nested array) but despite receiving good response data, the values are not being pushed into the subarray. Instead, an empty array is returned.

for (var j=0;j<this.imagesdataarray.length;j++){
 
    this.http.get("http://api.interiordesigns2020.com/api/services/app/ImageProject/GetAll?ProjectID="+this.imagesdataarray[j].projectid+"&MaxResultCount="+10000).subscribe( (res:any) =>{
    this.data=res;
    for  (var k in this.data.result.items.length){
      this.imagesdataarray[j].imagesnamearray.push({image:this.data.result.items[k].imageFiles,imagename:this.data.result.items[k].imageName,imageid:this.data.result.items[k].id ,completeimagepath:this.globalshare.websiteurl+"/images/UploadedWork/"+this.userid+"/"+this.imagesdataarray[j].projectid+"/"+ this.data.result.items[k].imageName});
  }
  });
}
}, 2000);
javascriptangulartypescripthttphttpresponse

Answer №1

Utilize the forEach method to manage asynchronous operations:

this.data = [];

this.imagesdataarray.forEach(image => {
  this.http.get("http://api.interiordesigns2020.com/api/services/app/ImageProject/GetAll?ProjectID=" + image.projectid + "&MaxResultCount=" + 10000).subscribe( (response:any) =>{
    this.data.push(response);       
    });
})

console.log(this.data);

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

Is there a way to trigger the vue-cli build command automatically when specific files are modified?

One way I can build my JavaScript file is by using the following command: vue build main.js --dist dist --prod --lib While this works, I am looking for a way to automate this process whenever I make changes to my JS or Vue files. I prefer not to rely on ...

javascriptnode.jsnpmvue.jsvue-component

Sharing data between two Angular 2 component TypeScript files

I'm facing a scenario where I have two components that are not directly related as parent and child, but I need to transfer a value from component A to component B. For example: In src/abc/cde/uij/componentA.ts, there is a variable CustomerId = "sss ...

javascriptangulartypescriptweb-frontend

Sharing data between two components in an Angular2-Meteor application

I am currently working with angular2-meteor. When attempting to transfer a value between two components (updating the value in the first component triggers an event in the second component where the new value is used), I have two methods available: The ...

meteorangularangular2-meteor

I am in search of a JavaScript or jQuery plugin for an HTML slider with a unique range functionality

I've been searching online but couldn't find a slider like the one shown in the attachment. Can anyone help? Is there a way to create this specific slider or is there an existing plugin or library for it? Please refer to the image below : ...

javascriptjqueryhtmlrange

Merging object keys and values from JSON arrays based on their keys, using JavaScript

Is there a way to merge object keys' values from JSON arrays based on their key? json1 = [ {key:'xyz', value:['a','b']}, {key:'pqrs', value:['x','y']} ] json2 = ...

javascriptarraysjson

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

I am working with some bootstrap HTML code that includes an ng-repeat function. <div class="row"> <div class="col-lg-4" ng-repeat="p in persons"> <img class="img-circle" src="images/{{ p.image }}" width="140" height="140"> < ...

javascripthtmlangularjsangularjs-ng-repeat

Typescript is struggling to accurately infer extended types in some cases

My goal is to optimize the body of a NextApiRequest for TypeScript. I currently have this code snippet: // This is a type from a library I've imported export interface NextApiRequest { query: Partial<{ [key: string]: string | string[]; ...

typescriptnext.jstypes

What is the best way to eliminate the final character in an input value once it has passed through regex validation in Angular8

Hello! I am attempting to remove the last digit of a string and update the input value each time my function checks if the input value passes a regex test on keypress. Initially, it works correctly, but then it adds an extra digit. After that, it works a ...

htmlangulartypescript

Sending data using jQuery to a web API

One thing on my mind: 1. Is it necessary for the names to match when transmitting data from client to my webapi controller? In case my model is structured like this: public class Donation { public string DonorType { get; set; } //etc } But the f ...

javascriptjquerytypescriptasp.net-web-api

Utilizing Angular: Integrating the Http response output into a map

I have a situation where I am making multiple HTTP calls simultaneously from my Angular application. The goal is to store the responses of these calls in a Map. data: Map<number, any> = new map<number,any>(); --------------------------------- ...

javascriptangularmultithreadinghttpsynchronization

Challenges with date formatting arise for Spanish speakers when the date returns as NaN or an Invalid

I have been working on an Angular app Objective: My aim is to allow users to input dates in Spanish format (DD/MM/YYYY) and display them as such, while converting them back to English format when saving the data to the Database. Issue: One problem I enco ...

javascripttypescriptdate

Steps for setting up an Angular project as a dependency in the package.json file of another Angular project

I currently have three separate Angular cli projects labeled as X, Y, and Z. My goal is to designate [X] as the parent project and include Y and Z as npm package dependencies within X. This means that the package.json file for [X] will list the dependencie ...

angularnpmangular-clisinopia

Ways to stop Bootstrap 4 dropdown from appearing when clicking on an input field?

Here is a straightforward bootstrap dropdown menu example, but with a twist - the toggle element is a text input. Instead of showing the dropdown on click event, I want it to appear when the user inputs something so I can dynamically populate the menu base ...

javascriptjquerybootstrap-4event-propagation

Encountering an issue accessing a property retrieved from a fetch request in TypeScript

I am currently dealing with the property success defined in the API (reCAPTCHA). /** * The structure of response from the veirfy API is * { * "success": true|false, * "challenge_ts": timestamp, // timestamp of the challen ...

jsontypescriptnext.jsrecaptcha

Customized queries based on conditional routes - expressjs

Can we customize queries based on optional routes? app.get('/:category/:item?', function (req, res) { var category = req.params.category; var item = req.params.item; var sqlQuery = 'SELECT * FROM items WHERE category = ? AND item = ?&a ...

javascriptnode.jsexpressroutes

Tips for displaying content when clicking on the opener containing tables or div elements

This is a snippet of JavaScript code $(document).ready(function () { $(".show-content").hide(); $(".opener").click(function () { $(this).parent().next(".show-content").slideToggle(); return false; ...

javascripthtml

The integration of Angular and Node API within the IISNode directory structure is experiencing functionality issues

Read more about the question I have successfully set up my Node API and Angular component with IISnode. However, when accessing the application from the IIS server, I noticed that they are showing in different directories (see image below). Additionally, I ...

javascriptnode.jsangulariisiisnode

Extract the innerHTML input value of each row in an HTML table

I've encountered an issue with my HTML table that contains static values, except for one cell which has an input field. When I try to convert the row data into JSON, the single input field is causing complications. Without the input field, I can suc ...

javascriptjqueryjsoninnerhtml

Steps to modify the Angular Universal entry file to app.js and relocate it to the root directory of the app

Currently, I have an Angular Universal SSR application running on node with the latest versions of Angular and Universal as of 21/01/2021. My hosting provider allows me to host my nodejs apps on a shared cPanel, but they only accept the entry file named a ...

node.jsangularangular-universal

How can we ensure that Protractor's ElementArrayFinder 'each' function pauses until the current action has finished before moving on to the next iteration?

Currently, I am facing an issue while trying to utilize an 'each' loop in my Angular 8 app's end-to-end tests using protractor. Within my page object, I have created a method that returns an ElementArrayFinder. public getCards(): ElementArr ...

javascriptangularprotractor