What is the best way to retrieve the data in date-value format from a REST API response?

Question

What is the best way to retrieve the data in date-value format from a REST API response?

I'm currently developing a Covid-Tracker application using Angular and an open REST API (here).

My goal is to retrieve the number of confirmed cases from the past 30 days in a specific country. This is an example of the response structure:

https://i.sstatic.net/0suUo.png

Within my Angular project, I am extracting the cases data from the JSON response with the following code:

covid.service.ts

  getHistoricalData(country: string): Observable<any> {
    return this.http.get<any>(`${this.URL}/historical/${country}`);
  }

dashboard.component.ts

  this.covidService.getHistoricalData('poland').subscribe(res => {
      let cases = res.timeline.cases;
      console.log(cases);
  });
  }

The output displayed in the browser's console is as follows:

https://i.sstatic.net/5trnN.png

However, I'm facing a challenge in storing this output as key-value pairs, where the key represents the date and the value signifies the number of cases on that particular day. I attempted using a Map, but I'm unsure how to extract the relevant date and its corresponding value. Any advice on how to achieve this would be greatly appreciated.

json angular typescript rest

Answer 1

Answer №1

To access the keys of an object, you can use Object.keys(your_object) like this:

// Assuming your data is stored in the timeline.cases variable
let data = { "6/19/20": 150, "6/20/20": 250 };
let updatedArray = [];
Object.keys(data).forEach(key => {
    updatedArray.push({date: key, cases: data[key]});
});
console.log(updatedArray)

You can then loop through newArray to retrieve each date and its corresponding cases. I hope this solution is helpful!

Answer 2

To access the keys of an object, you can use Object.keys(your_object) like this:

// Assuming your data is stored in the timeline.cases variable
let data = { "6/19/20": 150, "6/20/20": 250 };
let updatedArray = [];
Object.keys(data).forEach(key => {
    updatedArray.push({date: key, cases: data[key]});
});
console.log(updatedArray)

You can then loop through newArray to retrieve each date and its corresponding cases. I hope this solution is helpful!

What is the best way to retrieve the data in date-value format from a REST API response?

Answer №1

Similar questions

Implementing CSS Pre-loading in an Angular Application with Webpack and Heroku

The import analysis with the vite plugin encountered an error while trying to resolve the entry for the package "xxx". It is possible that the package's package.json file contains incorrect main/module/exports

The function type is not as strict as the return type in terms of enforcement

Issue with Angular 2 Observable causing lack of UI updates post Subscription

Adding Objects to a JSON File

The React error message states that there are no shared properties between the 'Component<P, S>' type and the 'ComponentLifeCycle<P, S>' type

Encountering an issue during Angular installation, which is resulting in an error message and preventing the

Utilizing dynatable JavaScript to dynamically create a table from JSON data

Conditional types can be used as type guards

Is it possible to generate a type solely based on the properties of a class that inherits from another class which is not publicly accessible?

Newly added rows do not automatically refresh in Angular's mat-table

What is the process for importing a local widget file in Angular?

Having trouble displaying JSON response in Firefox console with Django

"I am experiencing an issue with the PrimeNG year picker as it is unable

angular slickgrid grid date formatting only applies to grid view

Using Typescript to resolve a package from a location other than the default node_modules directory

TypeScript may be throwing an error due to a peculiar object possibly being "null"

Using settimeout in ASP.NET CORE JSON configuration file

Using multiple map functions within an RxJS Pipe is not an effective method

When testing my POST request online, it functions properly. However, I am facing difficulties in getting it to work in next.js as I keep receiving a 405