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);

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

Encountering issues when passing a string as query parameters

How can I successfully pass a string value along with navigation from one component to another using query parameters? Component1: stringData = "Hello"; this.router.navigate(['component2'], { queryParams: stringData }); Component2: ...

Encountering a Node Js post handling error with the message "Cannot GET /url

This is my ejs file titled Post_handling.ejs: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>POST-Handling Page</title> </head> <body& ...

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

Transferring String data between Java and JavaScript using Webview in both directions

I'm currently developing an application that allows two users to communicate via a webview. My goal is to transfer a String variable from JavaScript to Java in order to store it in my SQLite database, and also be able to do the reverse operation as we ...

Displaying conflicts in a single page by clicking on a checkbox

When I click on the <thead> checkbox of the first Table, it also checks the 2nd Table checkbox. However, that is not what I need. When I click on the First thead checkbox, all checkboxes in the first Table should be checked. Also, when I click on Fi ...

Transforming a "singular or multiple" array into an array of arrays using TypeScript

What is causing the compilation error in the following code snippet, and how can it be resolved: function f(x: string[] | string[][]): string[][] { return Array.isArray(x[0]) ? x : [x]; } Upon inspection, it appears that the return value will constantly ...

Communicating between PHP chat client and server

Currently, I am developing a basic PHP web chat application that interacts with a MySQL database. The communication is facilitated through AJAX requests - when a user posts a message, it gets saved in the database. function sendData(){ var textData = $(& ...

Primeng could not locate the material theme

Within my Angular application, I have incorporated the primeng npm package using npm install. Following the instructions provided on the GetStarted page for primeng, it is mentioned that the library includes 32 free themes. However, upon exploring the node ...

VueJS - When using common functions, the reference to "this" may be undefined

I'm struggling to extract a function that can be used across various components. The issue is that when I try to use "this", it is coming up as undefined. I'm not sure of the best practice for handling this situation and how to properly assign th ...

Adding elements to an array within a JSON object in Angular: What you need to know

Within my json object named "flowComponents," there is a string called "name" and an array of strings labeled "edition." As an example: { "_id": "553e87f3205465e83b46999b", "name": "FLOWCOMPONENT_CONTACTCOMBINATION_EDITION", "__v": 0, "edition ...

What is the best way to expose the "nuxtServerInit" action for Nuxt.js when using dynamic modules exclusively?

According to this answer, the code snippet below is taken from the official documentation of vuex-module-decorators // @/store/index.ts import Vuex from 'vuex' const store = new Vuex.Store({ /* Ideally if all your modules are dynamic then ...

Explanation requested for previous response about returning ajax data to the parent function

After coming across a helpful answer in the question titled How do I return the response from an asynchronous call?, I attempted to implement it without success. Reviewing Hemant Bavle's answer (currently with 62 votes) gave me hope, but my implement ...

TypeScript fails to detect errors in setting state with incorrect interface properties in React components

Even though I clearly defined an interface with specific props and assigned that interface to be used in useState, no error is triggered when the state value is set to an array of objects with incompatible props: This is how ResultProps is defined: interf ...

Organizing your project with VueJS, VuelidateJS, and NodeJS/Express for optimal structure

Primarily, I specialize in developing intranet sites and web front-ends for embedded devices using NodeJS. Currently, all my code is contained within one NPM package. I have NodeJS running behind Nginx, allowing Nginx to serve css/image/client-side-javasc ...

How to message someone privately in a public Discord channel using discord.js

Can someone help me figure out how to create a message in discord.js version 12.5.3 that only I can see? I know how to send messages to channels using message.channel.send, but I'm not sure how to make a message visible only to myself. Thank you! ...

"Uncaught Error: Unable to retrieve null properties" encountered while utilizing regex match in cheerio web scraping

Extracting text from brackets in HTML using regex: <dl class="ooa-1o0axny ev7e6t84"> <dd class="ooa-16w655c ev7e6t83"> <p class="ooa-gmxnzj">Cekcyn (Kujawsko-pomorskie)</p> </dd> <dd class="ooa-16w655c ev7e6t ...

Close session when browser/tab is exited

After extensive searching online, I have been unable to find a satisfactory solution for ending a session when a browser or tab is closed without requiring the user to log off. I have attempted numerous JavaScript codes that I came across, but none of the ...

Create a dynamic effect by adding space between two texts on the page

const Button = () => { const options = ['test1', 'test2', 'test3']; return ( <div style={{ position: 'absolute', left: '8px', width: 'auto', flexDirection: 'row' ...

Vue 4 and TypeScript: Dealing with the error message 'No overload matches this call'

In my Vue-Router 4 setup, I am trying to combine multiple file.ts files with the main vue-router (index.ts) using TypeScript. However, it throws an error that says "TS2769: No overload matches this call. Overload 1 of 2, '(...items: ConcatArray[]): ne ...

Is there an issue with the JSON data?

"stocksdata" :[{"id":7,"SCRIP":"ASIANPAINT","LTP":3341,"OHL":"BUY","ORB15":"BREAKOUT","ORB30":"NT","PRB":"NA","CAMARILLA& ...