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

Tips for overlaying text on the background in Next.js:

I'm currently working on creating an image element with overlay text. Check out my jsx code below: <div className={styles.img}> <img src={src} alt="" /> <p>{`(${size})`}</p> </div> And here is t ...

javascriptcssnode.jsnext.jssass

The JavaScript alert box cannot retrieve data from the PHP parent page

What am I missing? Here is the JavaScript code snippet: <script language="javascript"> function openPopup(url) { window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=n ...

javascriptphp

How do I set up middleware with async/await in NestJS?

I am currently integrating bull-arena into my NestJS application. export class AppModule { configure(consumer: MiddlewareConsumer) { const queues = this.createArenaQueues(); const arena = Arena({ queues }, { disableListen: true }); consumer. ...

javascriptnode.jstypescriptexpressnestjs

Using a variable in a Joomla module to create a JavaScript object with PHP

I am currently developing a Joomla module that features a progress bar utilizing the ProgressBar.js plugin. Since this module is designed to load multiple objects on a single page, hardcoding the IDs of these objects is not feasible. To address this, I uti ...

javascriptphpjqueryjoomla-extensions

Is it best to remove trailing/leading whitespace from user input before insertion into the database or during the input process?

There's something I've been pondering that pertains to MVC platforms, but could also be relevant to any web-based platform that deals with user input forms. When is the best time and method to eliminate leading/trailing whitespace from user inpu ...

javascriptruby-on-railsdatabaseformsmodel-view-controller

What is the best way to focus on a specific section of a CSS class name?

Successfully Working Example: HTML: <div class="items"> <div class="item">item 1</div> <div class="prefix-item-suffix">item 2</div> <div class="item">item 3</div> < ...

javascriptjquerycss

Is it advisable to incorporate vue-resource in Vuex actions?

I am currently working on a web application that retrieves airport data from the backend. To manage states and data sharing, I am utilizing Vuex. My dilemma is whether to load the airports in my Vuex actions or within a method of my Vue instance which will ...

javascriptvue.jsvue-resourcevuex

The radar chart created with amchart.js disappears when placed within bootstrap columns

I'm encountering an issue while trying to display radar charts using amchart.js in bootstrap columns. The "amStockGraph" charts render perfectly, however, the radar charts appear blank with no errors in the console. Any advice on this matter would be ...

javascriptbootstrap-4amchartsradar-chart

Commitment without anticipation of a resolution or rejection

While testing one of my AngularJs Services, I decided to write some Unit tests. Below is a sample code snippet that I have come up with: it('', function(done) { aDocument.retrieveServiceFile(extractedFileFeature) .then(function() { ...

javascriptangularjsjasminejasmine2.0

Converting JavaScript objects into a JSON string and then into a PHP array via POST

Hello everyone, I could really use some assistance with this issue. I am passing a JSON object to PHP like so: var x = {}; x.xt = {}; x.xt.id = id; x.xt.to = foo; somearray.push(x); To convert the object to JSON: $.toJSON(x); The resulting JSON string ...

phpjavascriptajaxjsonjavascript-objects

Using Java to parse a JSON file

I am attempting to read the JSON file below: [ { "0": { "owner_ip": 0, "id": 0, "text": "test", "timestamp": "" } }, { "1": { &q ...

javajson

develop the following application and execute the npm run dev command, but encounter the error message: "Command failed with exit code 1."

After executing npx create-next-app@latest followed by npm run dev, I encountered the error message Command failed with exit code 1.. Additionally, when trying to access https://localhost:3000, an error stating ERR_CONNECTION_REFUSED was displayed. Further ...

javascriptnpmnext.jswindows-11

Setting the data type of a value in a deeply nested object path using Typescript

I need to figure out how to determine the value types for all keys within nested object paths. While I have been successful in most cases, I am struggling with setting the value type for a deep nested property inside an array object. interface BoatDetails ...

typescript

Navigate back to the parent directory in Node.js using the method fs.readFileSync

I'm restructuring the folder layout for my discord.js bot. To add more organization, I created a "src" folder to hold all js files. However, I'm facing an issue when trying to use readFileSync on a json file that is outside the src folder. Let&ap ...

javascriptnode.jspathdiscord.jsfs

Issue with Angular 7 service worker caching audio files leads to range header problems in Safari browser

I am encountering an issue in my Angular application with the range request header for audio files when using Safari. When requesting audio from a server, the duration of the audio file is returned correctly. However, when requesting the audio from the ser ...

javascriptangularcachingaudioservice-worker

setting up angular 4 application on an IIS server

When running ng build --prod --base-href=/my folder/subfolder/, I also made sure to copy the dist folder into the specified subfolder. After setting the physical path in IIS, I tried to browse the site but only encountered a blank screen with no error mes ...

angulariis

Error: Component with nested FormGroup does not have a valid value accessor for form control in Angular

In my setup, the parent component is utilizing a FormGroup and I am expecting the child components to notify any changes in value back to the parent. To achieve this, I am trying to implement NG_VALUE_ACCESSOR in the child component so that it can act like ...

angulartypescript

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

javascriptjquerycssyii2yii2-advanced-app

I have implemented the ag grid date filter, but I am having trouble getting the apply and reset buttons to work properly within the filter

Currently, I am facing an issue with the ag grid date filter implementation. I am attempting to add both apply and reset buttons to the filter, but the code I have used does not seem to be functioning correctly. Here is the column definition code snippet ...

angularapplyag-griddatefielddatefilter

Guide on creating a style instance in a component class using Material-UI and Typescript

After transitioning my function component to a class component, I encountered an error with makeStyle() from Material-UI as it violates the Rule of Hooks for React. The documentation for Material-UI seems to focus mainly on examples and information related ...

reactjstypescriptmaterial-ui