Tips for retrieving a specific key/value pair during an Http request in Angular

Question

Tips for retrieving a specific key/value pair during an Http request in Angular

After making an HTTP call, I received a JSON file with the following data:

[
    {
        "totalConfirmed": 555,
        "mainlandChina": 548,
        "otherLocations": 7,
        "deltaConfirmed": 555,
        "totalRecovered": 0,
        "confirmed": {
            "total": 555,
            "china": 548,
            "outsideChina": 7
        },
        "deaths": {
            "total": 17,
            "china": 17,
            "outsideChina": 0
        },
        "reportDate": "2020-01-22"
    },
    {
        "totalConfirmed": 654,
        "mainlandChina": 643,
        "otherLocations": 11,
        "deltaConfirmed": 99,
        "totalRecovered": 0,
        "confirmed": {
            "total": 654,
            "china": 643,
            "outsideChina": 11
        },
        "deaths": {
            "total": 18,
            "china": 18,
            "outsideChina": 0
        },
        "reportDate": "2020-01-23"
    }
]

My objective is to extract and store the values of

totalConfirmed, deaths, & reportDate

. Therefore, the expected output should look like this:

{ 
   totalConfirmed : [555, 654], 
   deaths: [17, 18], 
   reportDates: ["2020-01-22", "2020-01-23"]
}

Below is the function I implemented in my service.ts:

public filteredData(): Observable<History> {
let dataHistory: History;
return this.httpClient.get(this.hostURL).pipe(
  map(res => {       

    dataHistory.totalConfirmedPerDay.push(res["totalConfirmed"]);
    dataHistory.totalDeathPerDay.push(res["deaths"]["total"]);
    dataHistory.dates.push(res["reportDate"]);
    return dataHistory;
  })
);

}

Here is the interface structure I defined for the History data:

export interface History {
  totalConfirmedPerDay: any[];
  totalDeathPerDay: any[];
  dates: any[any];
}

However, an error is occurring which says:

ERROR TypeError: Cannot read property 'totalConfirmedPerDay' of undefined

arrays angular typescript http

Answer 1

Answer №1

To achieve this, you can do the following:

return this.httpClient.get(this.hostURL)
  .pipe(
    map(arr => {
      return arr.map(sub => {
        return {
          totalConfirmed: sub.totalConfirmed,
          totalDeathPerDay: sub.deaths.total,
          dates: sub.reportDate
        };
      });
    })
  )

Next, within the subscription block:

.subscribe(res => {
   let op: History = {
     totalConfirmedPerDay: [],
     totalDeathPerDay: [],
     dates: []
   };
   res.forEach(e => {
     op.totalConfirmedPerDay.push(e.totalConfirmedPerDay);
     op.totalDeathPerDay.push(e.totalDeathPerDay);
     op.dates.push(e.dates);
   });
});

Answer 2

To achieve this, you can do the following:

return this.httpClient.get(this.hostURL)
  .pipe(
    map(arr => {
      return arr.map(sub => {
        return {
          totalConfirmed: sub.totalConfirmed,
          totalDeathPerDay: sub.deaths.total,
          dates: sub.reportDate
        };
      });
    })
  )

Next, within the subscription block:

.subscribe(res => {
   let op: History = {
     totalConfirmedPerDay: [],
     totalDeathPerDay: [],
     dates: []
   };
   res.forEach(e => {
     op.totalConfirmedPerDay.push(e.totalConfirmedPerDay);
     op.totalDeathPerDay.push(e.totalDeathPerDay);
     op.dates.push(e.dates);
   });
});

Answer 3

Answer №2

There is a typo error: dataHistory has not been initialized.

public filteredData(): Observable<History> {
  return this.httpClient.get(this.hostURL).pipe(
    map(res => {
      return {
        totalConfirmedPerDay: res.totalConfirmed,
        totalDeathPerDay: res.deaths.total,
        dates: res.reportDate
      };
    })
  );

Answer 4

There is a typo error: dataHistory has not been initialized.

public filteredData(): Observable<History> {
  return this.httpClient.get(this.hostURL).pipe(
    map(res => {
      return {
        totalConfirmedPerDay: res.totalConfirmed,
        totalDeathPerDay: res.deaths.total,
        dates: res.reportDate
      };
    })
  );

Answer 5

Answer №3

To utilize the map function, follow these steps:

map((dataArray:any[]) => {   //Exclude the entire array    
   dataArray.map(item=>{  //Include only a summarized version
     const newObj={        //Modify each element in the array
       totalConfirmed:item.totalConfirmed,
       totalDeathPerDay:item.deaths.total,
       date:item.reportDate
     }
     return newObj; 
   )
   return dataArray;
  })

Answer 6

To utilize the map function, follow these steps:

map((dataArray:any[]) => {   //Exclude the entire array    
   dataArray.map(item=>{  //Include only a summarized version
     const newObj={        //Modify each element in the array
       totalConfirmed:item.totalConfirmed,
       totalDeathPerDay:item.deaths.total,
       date:item.reportDate
     }
     return newObj; 
   )
   return dataArray;
  })

Tips for retrieving a specific key/value pair during an Http request in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Cross-origin resource sharing policy is rejecting the specified white-listed address in the CORS policy with the .WithOrigins

Implementing dynamic display of div based on dropdown selection in typescript

Utilizing the power of Kendo-Spreadsheet in conjunction with angular 6

JavaScript: Populating an Array with Image URLs Using a Loop

How to easily deactivate an input field within a MatFormField in Angular

Inverting the Arrangement of Linear Axis

What is causing certain code to be unable to iterate over values in a map in TypeScript?

Combine arrays of JSON data within a JSON object using JavaScript

Changing the contents of a global array in JavaScript

Exploring RouteReuseStrategy in Angular 2

What should be transmitted to the front-end following the successful validation of a token on the server?

The exploration of child routes and modules

Is there a way to configure side={THREE.BackSide} using an external .glb file?

What are some methods for retrieving RTK Query data beyond the confines of a component?

Creating a specialized Angular validator that detects null values and returns the associated FormControl

In Internet Explorer, the loading time of an Angular 2 webpack application is being delayed by the presence of excessive ".js.map" files

Tips for effectively overriding a method in typescript

Issue with deactivating child routes function

Enhancing the Angular Community Library Project

How can I establish default values for 2 to 3 options in a Dropdownlist?