Transferring various sets of information into a single array

In an attempt to generate JSON data in an array for passing to another component, I followed a method outlined below. However, being relatively new to this field, my execution may not have been optimal as expected.

employeeMoney: any[] = [];
employeeId: any[] = [];
    
this.employeeMoney.push(event.target.value);
this.employeeId.push(employId);

The user-input data is processed by pushing it into the respective arrays created within the same function.

    this.employeeMoney.map(function(item) {
      blopp.all.money.push(item);
    });
    this.employeeId.map(function(item) {
      blopp.all.id.push(item);
    });
    let blopp: any = {
      all: [{id: '', money:''}]
    };

My aim is to merge data from two separate arrays into a single list and then structure the JSON data as required. However, encountering an error when entering input data, with the following message displayed on the console:

ERROR ReferenceError: Cannot access 'blopp' before initialization

I am currently stuck at resolving this issue, attempting to create a JSON structure based on the latest data of money and id collected.

    blopp.map(function(item: any) {
      blopp.money.push({
        "employee_id" : '',
        "amount"  : item,
        "currency"       : 'USD'
      })
    });

Furthermore, I am puzzled about how to include two different datasets within the same array list while maintaining the desired JSON structure.

Answer №1

When both employeeMoney and employeeId are assumed to have the same order and length as if they were somehow connected, here is a potential solution.

const count = employeeId.length;
for (let i = 0; i < count; i++) {
  blopp.all.push({id: employeeId[i], money: employeeMoney[i]})
}

However, I must mention that while I'm not certain about the purpose of your project, I have a lingering concern. Are there some system design issues that need to be addressed?

Answer №2

To start, it's important to correct the data types by declaring them appropriately instead of as strings for data structures.

Additionally, you cannot directly push onto an array property in the manner you are attempting with: blopp.all.money.push(item);

The solution lies in recognizing that blopp is an object containing an array of objects with the structure {id: '', money: ''}. When pushing into this array, you should use the following syntax:

blopp.all.push({id: 1, money: '1000'})

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

Angular 2 or more variable binding

In this demonstration, only the unit-object will be saved: <select id="unit" name="unit" #unit="ngModel" class="form-control" [(ngModel)]="iu.unit" (change)="onDropdownChangeUnit($event)"> <option *ngFor="let i of UI_Units" [ngV ...

Output specification: Mandate certain attributes of a designated kind, while permitting them to be incomplete

I am searching for a solution in TypeScript that enforces the return type of a method to be a subset of an interface. Essentially, this means that all properties on the returned object must exist on the interface, but they are not required. Background: De ...

Steps for setting up the 'node_modules' folder in an older Angular project using the 'npm install' command

Currently, I am in the process of transferring our project code from our repository to a new laptop. The project was initially developed on Angular 5 last year. However, the new laptop is equipped with the latest versions of Angular CLI, NodeJS, and NPM to ...

Creating circular artwork with PixiJS: A step-by-step guide

I am trying to create a circular image with specific height and width dimensions, but have not found a satisfactory solution. Currently, I can achieve this using a texture, however it is drawn multiple times in the same position. const test = new Graphic ...

Setting the $dirty flag to true when a value is entered in the text box, but not the other way around

When I enter a value in the text box, myForm.$dirty gets set to true. However, the flag does not revert back to false when I delete all values from the text box. Why is this happening and how can I fix it? <input name="input" ng-model="myModel.text"& ...

Top method for dynamically loading a specific component by using its selector as a variable

I'm currently in the process of developing a straightforward game using Angular. The game is structured to consist of multiple rounds, each with unique characteristics that are distinguished by the variable roundType. For instance, round types can in ...

Is it possible to offer separate baserefs for Angular Universal SSR and client-side rendering?

I have a dynamic frontend application with Angular Universal. Everything runs smoothly when executed directly from Node using the commands npm run build:ssr and npm run serve:ssr on localhost:4000. However, I need to host the app at a subpath (servername/ ...

Tips for utilizing [(ngModel)] with an object that is empty, null, or undefined in Angular 4

When trying to assign [(ngModel)] inside my .html code to an empty (null or undefined) object, I encountered the error message _co.object is null. There are two scenarios: one where the object has a value and one where it does not. The ngModel works fine i ...

The issue of "Invalid arguments passed to jsPDF.text" encountered while using jsPDF on an nginx server

In my project admin, I have successfully implemented jspdf. The admin panel works perfectly fine on localserver. However, when I deploy it to a live nginx server, the server side throws an error: Error: Uncaught (in promise): Error: Invalid arguments passe ...

Is there a way to access all routes within Nestjs, including those from all modules and controllers?

Is there a way to retrieve a list of all available routes (controller methods) with their respective HTTP verbs using Nestjs? I would like it to be displayed in a similar format: API: POST /api/v1/user GET /api/v1/user PUT /api/v ...

Analyze two sets of JSON data and compile a new JSON containing only the shared values

I am trying to generate two JSON arrays based on a shared property value from comparing two sets of JSON data. this.linkedParticipants =[ { "id": 3, "name": "Participant 2", "email": "<a href="/ ...

Ways to verify the compatibility between TypeScript type definitions in @types and the corresponding package

After dabbling with typescript in my node.js projects for a while, I've come to realize that many npm packages have separate @types packages for typescript definitions. But here's the dilemma: how can one be certain that the @types package is syn ...

Navigating to a fresh window using Selenium/Protractor in Javascript

Seeking assistance with accessing a new "pop-up" window that appears after clicking a "login" button. The code I am currently using to capture the window handle seems to be ineffective even though I am able to reach the displayed window. My scenario invol ...

The ng-change directive does not execute the specified function

Issue : Problem with ng-change directive not executing a function Description: <input class="cmn-tgl" type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="user.habits.early_riser" ng-change="updateUserDetails()"> The input elem ...

Unable to send data to Spring Controller from form submission

As a newcomer to Spring, I have been exploring tutorials online to enhance my knowledge. Recently, I developed a straightforward Spring MVC Login App utilizing AngularJS for the frontend and JSON for data posting to the Spring Controller. The login form I ...

Leveraging Window Object in Custom Hooks with NextJS

ReferenceError: window is not defined This issue arises on the server side when NextJS attempts to render the page. However, it is possible to utilize window within the useEffect hook by following the guidance provided here. I am seeking advice on creati ...

Tips for accessing HttpParams within a WebApi Controller while utilizing the [HttpPut] method

I am attempting to update a specific resource by accessing it through the PUT method in an Angular service. RollBackBatchById(selectedBatchId: number) { const params = new HttpParams(); params.append('resourceId', resourceId.toString()); ...

Is it possible to minimize the number of accessors needed for reactive forms?

Currently, I am dealing with a reactive form that consists of 20 different inputs. An example of one input is shown below: <input formControlName="name" matInput> For each input, I find myself needing to write an accessor function like the ...

Tips for resolving SyntaxError: Unable to utilize import when integrating Magic with NextJS in a Typescript configuration

Looking to integrate Magic into NextJS using TypeScript. Following a guide that uses JavaScript instead of TypeScript: https://github.com/magiclabs/example-nextjs Encountering an issue when trying to import Magic as shown below: import { Magic } from &qu ...

Issue with Angular ng-src not able to load picture when using --livereload (REVISITED)

My Goal: My objective is to enable users to download images from the server to their device when they click on an image placeholder. The downloaded image path will then be stored in the $scope and shown to the user. Below is my controller: .controller(&a ...