Retrieve the JSON information specifically for the selected ID

Question

Retrieve the JSON information specifically for the selected ID

Having a set of JSON data, with 2 base IDs and attachment data within each ID. The goal is to click on a base ID and display its attachment data on a separate page. How can I retrieve information for the clicked ID only?

{
    "_embedded": {
        "deliveryMessageList": [
            {
                "id": "73c624c9-6db7-4fd2-ac91-c1084aee0565",
                "attachments": [
                    {
                        "id": "fb1e6d31-4c4e-4356-be5a-827ea5ec422d",
                        "attachToDeliveryMessage": false
                    },
                    {
                        "id": "160edceb-cda7-483c-a2b9-786f583b523d",
                        "attachToDeliveryMessage": true
                    }
                ]
            },
            {
                "id": "bfd600ad-754f-444d-bddb-f5cf4d7727b8",
                "attachments": [
                    {
                        "id": "e4454f8c-4ecb-444e-a82a-318bbcee1c11",
                        "attachToDeliveryMessage": false
                    },
                    {
                        "id": "791a73eb-59cc-4bba-8b16-d442169a7923",
                        "attachToDeliveryMessage": true
                    }
                ]
            }
        ]
    }
}

Presenting the UI as shown below

https://i.sstatic.net/fbPyA.png

Attempting to implement an ID to the click event for further processing

  getCustomerAccountDocs(selectedItem: any, index: number) {
    this.CustomerAccountDocsService.getCustomerAccountDocs()
    .subscribe((data: any) => {
      this.customerAccountDocs = data;
    });
  }

Below is the HTML code snippet

  <tr *ngFor="let item of customerAccountDocs; let i=index" (click)="getCustomerAccountDocs(item, i)">
    <td> {{item.accountNumber}}</td>  
    <td> {{item.id}}</td>
  </tr>

angular typescript

Answer 1

Answer №1

It seems like the key question here is how to retrieve all siblings of a specific JSON node. The method of accessing the ID may vary, but I will demonstrate a way to do it within a loop. Assuming that your main JSON object is stored in a variable named "main," you can proceed as follows:

var embedded = main["_embedded"]["deliveryMessageList"]; // or however you access the JSON keys
var newJSON = {};
embedded.forEach(data => {
    for (var key in data) {
        var currentIDsiblings = {};
        var ID = null;
        for (var subkey in data[key]) {
            if (subkey !== "id") {
                currentIDsiblings[subkey] = data[key][subkey];
            } else {
                ID = subkey;
            }
        }
        newJSON[ID] = currentIDsiblings;
    }
});

/* You can then retrieve all siblings of a specific ID by accessing newJSON[myID] */

Answer 2

It seems like the key question here is how to retrieve all siblings of a specific JSON node. The method of accessing the ID may vary, but I will demonstrate a way to do it within a loop. Assuming that your main JSON object is stored in a variable named "main," you can proceed as follows:

var embedded = main["_embedded"]["deliveryMessageList"]; // or however you access the JSON keys
var newJSON = {};
embedded.forEach(data => {
    for (var key in data) {
        var currentIDsiblings = {};
        var ID = null;
        for (var subkey in data[key]) {
            if (subkey !== "id") {
                currentIDsiblings[subkey] = data[key][subkey];
            } else {
                ID = subkey;
            }
        }
        newJSON[ID] = currentIDsiblings;
    }
});

/* You can then retrieve all siblings of a specific ID by accessing newJSON[myID] */

Retrieve the JSON information specifically for the selected ID

Answer №1

Similar questions

The presence of React Router in Office JS Excel results in a blank screen

Navigating through an array's contents with RxJs

Outputting double columns with Typescript Sequelize associations

Angular 2 is throwing an error, stating that Observable is not defined

AG-GRID-ANGULAR - Is there a way to automatically check or uncheck a checkbox in the header component based on the status of checkboxes in the cell renderers?

Transforming a string such as "202309101010" into a date entity

Unable to utilize the useState hook in TypeScript (Error: 'useState' is not recognized)

Empty nested Map in POST request

In what ways can enhancing the TypeScript type system with additional restrictions help eliminate errors?

The @Input() function is failing to display or fetch the latest value that was passed

Tips for sending the updated position of the marker to a function

JSX conditionally rendering with an inline question: <option disabled value="">Select an option</option>

The Vue store array declaration triggers a TS error stating that it is not assignable to a parameter of type never

Resolving Unhandled Runtime Errors When Using Components with Dynamic API Calls in NextJS: A Guide to Fixing the Issue

How to Efficiently Remove Array Elements by Index in Typescript

Transformation of entryComponents to Angular 9 Ivy

How do you obtain the string name of an unknown object type?

Tips for ensuring that npm only creates one instance of a dependency when it is being used by multiple projects

When using Webpack and Typescript together with the watch feature, an error with code TS2554 may occur only during

Tailored validation for targeted field