What is the best way to update object property data variables in JavaScript/TypeScript?

I have reorganized the following code to enhance simplicity and reusability. Essentially, my goal is straightforward: I possess a series of empty arrays that are linked to specific keys (which correspond to a set of unique ID's).

To populate data into these various arrays, I utilize a common API call. In this API call, the request payload includes the ID of the reference data. Upon receiving the response, I aim to identify the variable name inside the object associated with the ID and store the received value there before moving on to the next iteration of values/IDs.

For instance, if the ID value is 1, then the request payload will also include an ID of one. The corresponding response data should be stored in the value matched[1], like 'fruits' array mentioned earlier (not the object value itself, but the array named "fruits"). How can I achieve this?

let fruits=[]
let vegetables=[]
let nuts=[] ......etc up to n number of entries

let mapped={1:fruits,2:vegetables,3:nuts,.......(and other 'n' entries) }

for(let i=1;i<=15;i++){
    let payload={id:i}
   this.apiService.fetchReferenceData(payload).then((response)=>{
         mapped[i]=response.data  //the received value must be stored in the array corresponding to the name of the object value
    })

  }
}

Answer №1

Greetings, Jay Swamianrayan!

All seems to be in order... It may be that you are seeking...

mapped[i].push(response.data)

as opposed to

mapped[i]=response.data

Answer №2

If you want to save a value in an array, one way is to utilize an array method such as push.

Instead of the current line - mapped[i]=response.data, you can opt for mapped[i].push(response.data)

Just a note: Judging from the snippet of code provided, it seems like you are saving references to different arrays (like fruits, vegetables, etc.) within the mapped object.

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

Can you delve into the origin of the term Modal in the context of Angular and web development?

My understanding of a Modal is that it is a webpage component that opens separately from the main page in order to maintain continuity. Am I correct? I am curious as to why it is referred to as a Modal. Could it be short for modularity? Meaning that vari ...

Upgrading from version 3 to version 5 in d3 does not just update the visualization but also introduces a new one

I attempted to upgrade this d3 visualization from version 3 to version 5, but instead of updating within the existing visualization, it continues to add another visualization below. I included: d3.select(".node").selectAll("*").remove(); d3.select(". ...

Creating unique identifiers and names for dynamically generated editable HTML table cells using JavaScript

Clicking the button will trigger the GenerateTable() function to dynamically create a table based on selected options from the drop-down menu as column headings. Below is the JavaScript code, along with instructions on how to assign IDs and names to each t ...

Tips for preventing "timeout while waiting for third-party check iframe message" when using Keycloak and Angular

I'm in the process of securing an Angular application with a Keycloak server. I've followed several tutorials with similar instructions, but I encountered an issue that has me stuck: Timeout when waiting for 3rd party check iframe message. My ...

What are the best techniques for achieving flawless ring geometry in three.js?

I'm struggling to achieve perfect ring geometry in three.js, similar to the image here: https://i.sstatic.net/ArxKa.png After spending over a day troubleshooting, my code currently looks like this: var scene = new THREE.Scene(); var camera = new TH ...

What could be causing the React.js axios data to display on the console but not on the screen?

I am currently working on a React Axios Project using data from . The characters data includes another API link, so I implemented an Axios loop to display the names of the characters. While I can see the characters' names in the console, they are not ...

How can I set a condition to open a specific page in ReactJs?

Currently, I am in the process of developing a website and have successfully implemented a profile page. This profile page consists of three buttons - Settings, Favourites, and Posts. To enhance user experience, I decided to structure it as a multi-step fo ...

Tips for resolving a double click issue with a jQuery slide up/down animation

When I click a button, there is an animation that makes a div slide up and then down again. It functions the way I want it to, but the first time you click it, it doesn't work; you have to click twice for it to respond. Someone recommended using... ...

What are the steps to achieve full screen mode in Google Chrome within an Angular 4 Application?

I'm working on an application and I'm looking to incorporate a feature where, when a user navigates from one component to another, the new component's ngOnInit method triggers the Chrome browser to enter full screen mode, similar to pressing ...

Switching the position of a Button in Semantic UI React: Moving it from the Left to the

I need assistance with adjusting the position of a Semantic UI React Button. By default, the button is displayed on the left side, but I would like it to be on the right side instead. Can someone please provide guidance on how I can move the Semantic butto ...

Ensuring React Native/Redux child components receive the latest state updates with every change

When using <NavigationCardStack/> as the root component in React Native and Redux to render routes with _renderScene(), I noticed that the updated state is not always passed down every time there is a state change. Despite having console.log(this.pro ...

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

Is it possible to enlarge the panel only by clicking on the text, without affecting the entire header panel?

I need help with my accordion setup. I want to be able to expand or collapse each panel by clicking only on the header text, not the entire header area. Can anyone provide guidance on how to achieve this? For example, when I click on the text for 'He ...

Managing errors in jQuery's .ajax function

Having some issues with jQuery.ajax() while trying to fetch an html code snippet from table_snippet.html and replacing the element in my html code. The error handler in jQuery.ajax() gets triggered instead of the expected success handler. <!DOCTYPE H ...

"Debugging a simple demonstration showcasing NodeJS, AngularJS, and Express

Currently, I am following an online tutorial to learn a new concept. I have reached the part where I need to display data using HTTP GET from the controller, while the sample data is stored in the server file. I managed to fetch the data from the controlle ...

implementing automatic ajax requests when user scrolls

This is a piece of JavaScript code: $(window).scroll(function() { $.ajax({ type: "GET", url: "not_data.php", data: dataString, success: function my_func () { //show new name ...

Adjusting the definition of a class method in TypeScript or JavaScript

In my code, I have a class defined as follows: class A { constructor() {} myMethod() { console.log('in my method'); } } I am looking to create a method that will take in a className and methodName like so: modifyClassMethod(cla ...

Are there Alternatives for Handling Timeout Exceptions in Selenium WebDriver?

Currently, utilizing Selenium WebDriver with node.js to scrape extensive weather data spanning multiple decades from a site that loads only one day's worth of data per page at full resolution. The process involves navigating between URLs and waiting f ...

How can I save the content from a tiptap editor in a PHP form?

I'm looking to integrate the TipTap editor into a PHP form as a textarea field. I've set up a Vue component and passed it to the blade view. Blade view: <form method="post" action="{{ route('dashboard.edit.postInfo', ...

The error message "TypeError: undefined in JavaScript Vue's V-for loop

I created a function that generates an array of objects in this format: getMonthDaysGrid() { const totalLastMonthDays = this.getFirstDayOfMonth().dayNumber; const totalDays = this.month.numberOfDays + totalLastMonthDays; const monthList = Array ...