Exploring the intricacies of extracting nested JSON data in TypeScript

Can someone help me with this issue?

https://example.com/2KFsR.png

When I try to access addons, I only see [] but the web console indicates that addons are present.

This is my JSON structure:

https://example.com/5NGeD.png

I attempted to use this code:

console.log(vehicle.montage_card.addons);
but it returns an empty array: [].

What am I missing or doing wrong?

UPDATE

In my PrimeNg table, one section looks like this:

      <ng-template let-col let-vehicle="rowData" let-index="rowIndex" pTemplate="editor">
        <p-multiSelect *ngIf="!viewMode && (continuationContract == 0)" name="client_vehicles{{index}}" [showToggleAll]="false" [style]="{'width':'100%'}"
          [options]="clientVehiclesOptions" defaultLabel="Open list" [ngModel]="vehicle.assignedContractsID" (ngModelChange)="onSelectedClientVehiclesChange($event, vehicle)"
          maxSelectedLabels=0 selectedItemsLabel="Selected: {0}." (onChange)="checkSelectedClientVehiclesQuantity(vehicle)"
          [disabled]="viewMode">
        </p-multiSelect>
      </ng-template>

Here is part of my function where I log the vehicle object:

onSelectedClientVehiclesChange(event: any, vehicle: Vehicle) {

let temp: any[] = [];
let numberExists: boolean = false;
console.log("vehicle");
console.log(vehicle);
console.log(vehicle.montage_card.addons);

event.forEach(element => {
  temp.push(this.clientVehicles.client_vehicles.find(clientVehicle => clientVehicle.id == element));
});
}

Answer №1

When displaying the data, addons may not appear immediately. It is important to populate the data at the appropriate time, either after displaying it or using it in a timely manner. An example of this is populating data from the server using ajax.

It is worth noting that the data you are printing is an object, which means it is a reference to memory space. If you inspect the data in the console after it has been populated, you will see the addons.

This is why initially it may say there are no addons, but when expanded, they are visible.

Remember to only use the data after it has been populated. Take into consideration any asynchronous actions that may be occurring.

Answer №2

To achieve the desired outcome, consider implementing the code snippet below:

console.log(vehicle['montage_card']['addons']);

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

Discover the ins and outs of utilizing the Google+ Hangout API specifically for chatting purposes

I am currently working on a webpage and I want to include a hangout button that will allow users to connect with me and start chatting automatically when clicked. Here is the code I have so far: <script src="https://apis.google.com/js/platform.js" asy ...

Clicking on the icon reveals the current date

I need some help with the input field that displays the calendar date. Currently, I can only click on the input field to show the calendar date. What I actually want is for users to be able to click on a calendar icon to display the calendar date, which sh ...

Retrieving HTML content using scriptJS

Currently utilizing VueJS and encountering an issue after compiling code in production mode. I have one index.html file and several assets that are being uploaded to the cloud. The challenge lies in the fact that the client is not accepting the HTML file ...

Eliminate perfect-scrollbar functionality on mobile devices

I have applied the perfect-scrollbar class with 'height: auto' on mobile screens, expecting it to work properly. It's functioning well in responsive mode on the web. However, it does not scroll on mobile devices. @media (max-width: 992px) { ...

Can the color of a highchart graph be altered simply by clicking on the line?

Greetings! I am currently working on plotting a graph using highchart and I was wondering if there is a way to allow users to change the color of the plotted line by simply clicking on it and selecting a color from a color picker tool. I do not want to lim ...

Tips for creating a dynamic system to continuously add more HTML tables in PHP

I am working with an HTML table where the data is retrieved from a database. I need to add new rows to enter additional data, but the numbering does not continue from the last number. My question is how can I increase the numbering in the table. Please ref ...

What is the best way to iterate over an indexed attribute in PHP?

Here is my ajax code snippet: $.ajax({ type: "POST", url: "bee_sesi_edit.php", data: 'serv_ruang='+ serv_ruangx +'&who='+names +'&sesi_d1='+ sesi_d1 +&apos ...

Guide to altering the color of a list item when hovering in HTML

Is there a way to change the color of the <li> element only when hovering over it, without affecting its parent or child elements? Here is an example: HTML: <div id="tree"> <ul> <li>apple</li> <li>banana</l ...

What is the best way to include keys in my JSON data, rather than just values?

I've encountered an issue with the PrimeVue datatable I created, as it is only showing empty rows. After investigating, I believe the problem lies in my JSON data structure, where the fields do not have keys. What modifications should be made to stan ...

How can I process a data retrieval request in a Laravel controller if someone asks for information from my applications?

The request will be in JSON format, as follows: { "app_id": 1234, "app_key": "our_app_key", "bus_id": 67, "data": [{ "seat_id": 1 }, { "seat_id": 2 }] This is the content of my routes.php file: Route::get('getBookingSeats', 'Selec ...

Changing a get request to a post request: A step-by-step guide

I have been utilizing the following script: $(document).ready(function() { $("#test-list").sortable({ handle : '.handle', start: function(){ $("#success-result").html("loading...."); }, update : function ( ...

Guide on making a Mapped Type in TypeScript using dynamic generic parameters

I am working with an object that contains one or more PreparedStatement. I am looking to create a general type definition for this object. Is there a way to achieve this in code? type PreparedRequest<Input, Result> = { input: Input; result: Resul ...

The 'type' property is not found on the 'never' type

There seems to be a typescript error showing up as Error: Property 'type' does not exist on type 'never' in the following code snippet: export const getSomething = (actionLog: [] | undefined) => { console.info(actionLog[length ...

Attempting to implement ajax for form submission, however finding that the $_POST array is coming back as empty

I'm attempting to send JavaScript arrays to a new page using Ajax. Although there are numerous questions on this topic on Stack Overflow, I have decided to implement Ajax in the following manner after examining various answers: var test = {}; test[& ...

Effective steps after Ajax request

Whenever a user clicks the "like" button, I perform a check in the database to see if they have already liked the photo. This check is done using ajax. If the photo has already been liked, the success message will indicate "already liked", otherwise it wi ...

Using npm to trigger the package.json file will activate both the harp and browser-sync applications

I am looking for a way to simultaneously start a harp.js server and run a browser-sync process. This setup works perfectly on Linux with the following package.json configuration: { "scripts": { "dev": "bash ./serve.sh" } } Here is the content of ...

What exactly is the significance of the </< in THREE.Camera.prototype.lookAt</<()?

After experimenting with THREE.js for a while, I came across something peculiar: When using Firefox and opening the developer console to type camera.lookAt (assuming your camera is named camera), it displays function THREE.Camera.prototype.lookAt</< ...

Changing the value of a JSON object

My goal is to update a value in a JSON file by removing the last character from a URL. I wrote the following code, but unfortunately, it doesn't seem to be making any changes. I'm a bit lost on what went wrong... def modify_json(file): with ...

Problem encountered with the @ManyToOne and @OneToMany declarations

Hello there! I recently embarked on a new project utilizing TypeScript, TypeORM, and Postgres. Everything seemed to be going smoothly until I encountered some perplexing errors related to a relationship between @ManyToOne and @OneToMany. Below are my entit ...

Creating formGroups dynamically within an ngFor loop inside an accordion

I am facing a challenge with an accordion feature that generates a specified number of sections x based on user input. Here is an example: After creating the sections, I need to load employee information into each section separately. However, when I load ...