Transforming a detailed JSON structure into a more simplified format with Angular 2

As a newcomer to Angular 2, I find myself encountering a hurdle in filtering unnecessary data from a JSON object that is retrieved from a REST API. Below is an example of the JSON data I am working with:

{  
  "refDataId":{  
     "rdk":1,
     "refDataTypeCD":"CNTRY",
     "refDataStatusCD":"C",
     "effStartDT":"2017-09-01",
     "effEndDT":null,
     "updtUserID":"EDMO",
     "updtTS":"2017-09-05"
  },
  "refDataDescs":[  
     {  
        "rdk":1,
        "langCD":"EN_CA",
        "refDataNM":"Not Applicable",
        "refDataShortNM":null,
        "refDataDesc":"Not issued by ISO. Dummy country code for internal reference use only.",
        "updtUserID":"EDMO",
        "updtTS":"2017-09-05"
     }
  ],
  "refCntry":{  
     "cntryRdk":1,
     "cntryIso2DigitCD":"0",
     "cntryIso3DigitCD":null,
     "cntryIsoNumericCD":0,
     "riskTypeRdk":0
  }

}

{  
  "refDataId":{  
     "rdk":2,
     "refDataTypeCD":"CNTRY",
     "refDataStatusCD":"C",
     "effStartDT":"2017-09-01",
     "effEndDT":null,
     "updtUserID":"EDMO",
     "updtTS":"2017-09-05"
  },
  "refDataDescs":[  
     {  
        "rdk":2,
        "langCD":"EN_CA",
        "refDataNM":"Afghanistan",
        "refDataShortNM":null,
        "refDataDesc":null,
        "updtUserID":"EDMO",
        "updtTS":"2017-09-05"
     }

My requirement is to extract just these two fields from the dataset:

  • "rdk":2,
  • "refDataNM":"Afghanistan"

After extracting this data, my goal is to create a new JSON array containing only this information.

{"id":2,"itemName":"Afghanistan"},
{"id":3,"itemName":"Albania"}
javascriptarraysjsonangulartypescript

Answer №1

If you're looking for a different approach, consider the following suggestion:

retrieveData(data:any[]) {
    const result=[];
    data.forEach( entry => result.push({"ID": entry.dataId.id, "Name": entry.dataDescs.dataName}));
    return result;
 }

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

What steps can I take to fix the 'node module error' while deploying a project on Vercel?

While working with the world-countries package, I encountered an issue during deployment in Vercel. The error message indicated that a ';' was missing in the index.d.ts file of world-countries located in the node_module directory. Here is the ex ...

typescriptdeploymentnode-modulesvercelnext.js13

Show the current time using Moment.js

I am currently working on developing a clock component that displays the current time in real-time. Issue: The initial time is correctly displayed when the page loads (HH:mm A), but the clock does not update dynamically. clock.component.ts : import { ...

javascriptangulartypescriptmomentjs

Steps for removing the style when a button is clicked

Inside the ngFor loop, I have a button that I am styling as shown below. <div *ngFor="let component of componentList; let index = index"> <button type="button" id='Button{{index}}' name='Button{{index}}' ...

angularng-classangular13

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

I have a single HTML template at this location: . The current page is tailored for the state of Arkansas in the US, but I now need to replicate the design for all 50 states. Each state page will have the same layout, but different content specific to that ...

javascriptphphtmlcssasp.net

The Javascript code is functioning properly in Chrome, however, it is experiencing compatibility issues in other

Recently, I put together a simple web page using React and Express. One of the modules features a basic form with text input fields, an email input field, and a submit button that is supposed to send an email containing data from the input fields to me. To ...

javascriptreactjsgoogle-chromeexpressfirefox

showing the response message from a post request using Vue.js and Axios

Within APIService.js, there's a function: createPatient(data){ const url = 'http://192.168.1.3/api/clinic/patient/add/'; return axios.post(url, data).then(resp => {return resp}); } In the script tag of my vue component: result ...

javascriptvue.jsaxios

How can I rectify the varying vulnerabilities that arise from npm installation?

After running npm audit, I encountered an error related to Uncontrolled Resource Consumption in firebase. Is there a solution available? The issue can be fixed using `npm audit fix --force`. This will install <a href="/cdn-cgi/l/email-protection" clas ...

javascriptnode.jsfirebasenpmnpm-install

Verify internet connectivity with Ionic

Seeking a reliable method to accurately detect whether a mobile device is truly online and connected to the internet. One approach I have explored involves utilizing an http interceptor: if (navigator.connection.type != Connection.NONE) alert("you'r ...

angularionic-framework

Using an array of objects to set a background image in a Bootstrap carousel using jQuery: a step-by-step guide

I have an array of items, each containing a background property with a URL to an image. Here is my array: Here is the HTML structure: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators">&l ...

javascriptjqueryhtmlcsstwitter-bootstrap

I am encountering a problem while attempting to fetch information from Firestore through the Firebase JS SDK

My current challenge revolves around retrieving data from Firestore using the Firebase JS SDK. A specific error message persists: An unexpected issue arises: TypeError: firebase_firestore__WEBPACK_IMPORTED_MODULE_3__.getDoc(...).data is not a function I ...

javascriptreactjsfirebasegoogle-cloud-firestore

Material UI offers a feature that allows for the grouping and auto-completion sorting

I am currently utilizing Material UI Autocomplete along with React to create a grouped autocomplete dropdown feature. Here is the dataset: let top100Films = [ { title: "The Shawshank Redemption", genre: "thriller" }, { title: " ...

javascriptreactjstypescriptmaterial-ui

adding a variable to the value of an input field using the val() method

Here is a code snippet that appends the text 'text goes here' to an input value: $('#someid').val($('#someid').val() + 'text goes here'); I attempted to use a variable in a similar way, but it didn't work as e ...

javascriptjquery

JS: Submitting form data through POST method but fetching it with GET method?

When using PHP to retrieve data, the $_POST method cannot be used; only $_GET. Why is that? Could it be that I am not sending my form data correctly? I assumed that by using request.open("POST"), the form would be processed as a POST request rather than a ...

javascriptphpajax

Invalid extra parameters in the $.ajax function

I am attempting to access a web service in order to retrieve some data. I must include this URL using the GET method: http://localhost/ecosat/ws/api.php?t=vw_motorista However, when I check in Chrome Developer Tools, the link is shown as: http://localho ...

javascriptjqueryajaxgoogle-chromeget

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

<div id="abc"> <div id="a_b"> abcd </div> <div id="c_d"> xyz </div> </div> I have a challenge where the divs on my page are generated dynamically and their IDs change every time the page loads. When the window i ...

javascriptjqueryhtmlcss

Can you guide me on creating a post and get request using ReactJS, Axios, and Mailchimp?

I am brand new to ReactJS and I am currently working on developing an app that requires integration with Mailchimp to allow users to subscribe to a newsletter. I am looking for assistance on making a request using axios. Where should I input my API key? ...

javascriptreactjsmailchimp

Utilizing the panelChange event in Angular 2 with NgbAccordion through programmatic invocation

I have a ngbAccordion with a panelChange event that is functioning well. I am curious if there is a way to programmatically call that method in the ngOnInit lifecycle hook? <ngb-accordion #regularAccordion="ngbAccordion" *ngFor="let item of cartItems; ...

angularbootstrap-accordion

How can I retrieve the initial IP address from the 'X-Forwarded-For' using a Log Insight Query?

Can someone help me with extracting the initial IP address from the given data: X-Forwarded-For":"1.1.1.1, 2.2.2.2? This is the query I am currently using: fields @timestamp, @message | filter @message like /Endpoint request body after transform ...

jsonamazon-web-servicesamazon-cloudwatchamazon-cloudwatchlogs

Issue encountered while attempting to utilize setStart and setEnd functions on Range object: Unhandled IndexSizeError: Unable to execute 'setEnd' on 'Range'

Every time I attempt to utilize a range, an error message appears in the console: Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range': The offset 2 is larger than or equal to the node's length (0). This is the script I ...

javascriptrange

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

javascriptcssreactjsreact-dnd