Angular GET returns Object instead of Array

Question

In consuming a REST API with Angular, my GET request returns an object. I wish to have an array so that I can slice and display the contents with property binding.

I feel the solution involves 'map' function but previous attempts resulted in a key:value pair for each letter of each field (!).

I have tried KeyValuePipe in the HTML but see nothing not sure where I've gone wrong.

Is it possible my .ts is not returning any value??

My component.ts code:

  fetchForceDetail(){
    this.http
    .get<ForceDetail[]>('https://data.police.uk/api/forces/' + bedfordshire)
    .subscribe(forcedetails => {
      console.log(forcedetails);
      return forcedetails;
  });}

my html:

<div class="col-xs-12" *ngFor="let item of forcedetails | keyvalue">
  {{item.key}}:{{item.value}}
</div>

the object returned:

{
  "description": "<p>Bedfordshire Police is dedicated to protecting people and fighting crime together.</p>\n\n<p>At 477 square miles and with 664,500 people Bedfordshire is one of England’s smallest, yet most diverse, counties and faces complex crime challenges more usually seen in large metropolitan cities.</p>\n\n<p>More than half of its residents live in its largest towns, Luton and Bedford, which have diverse and often transient communities, alongside smaller market towns and rural parishes.</p>\n\n<p>Bedfordshire is a hub of transport link with London Luton Airport, the UK’s fifth busiest, the M1 and A1(M)motorways which traverse the county, and two principle railway lines that connect people with the heart of London in less than an hour.</p>\n\n<p>Bedfordshire has a complex mix of volume crime, serious crimes, drugs, gangs and terrorism threats.Every day our officers meet threats, harm and risks like those in large cities.</p>\n\n<p>Despite our relatively small size, we lead joint protective services which include Armed Policing, Dogs, Roads Policing and the Major Crime, for Bedfordshire, Cambridgeshire and Hertfordshire and are the lead force for the Eastern Region Special Operations Unit – a co - ordinated approach from seven forces in the region to tackle serious and organised crime and terrorism.</p>",
  "url": "http://www.bedfordshire.police.uk",
  "engagement_methods": [
    {
      "url": "https://www.bedfordshire.police.uk/",
      "type": null,
      "description": "<p>Latest news, information about crime, crime reduction advice and information about your area can be found on our website.<br />We offer a range of online services for reporting crime and suspicious activity, requesting information, giving feedback and applying for jobs.See our website for details of all our online services.</p>",
      "title": "Bedfordshire Police"
    },
    {
      "url": "http://www.facebook.com/bedspolice",
      "type": null,
      "description": "<p>Bedfordshire Police on Facebook</p>",
      "title": "Bedfordshire Police on Facebook"
    },
    {
      "url": "http://twitter.com/bedspolice",
      "type": null,
      "description": "<p>Bedfordshire Police on Twitter</p>",
      "title": "Bedfordshire Police on Twitter"
    },
    {
      "url": "http://www.youtube.com/bedfordshirepolice",
      "type": null,
      "description": "<p>Bedfordshire Police on YouTube</p>",
      "title": "Bedfordshire Police on YouTube"
    }
  ],
  "telephone": "101",
  "id": "bedfordshire",
  "name": "Bedfordshire Police"
}

That's an issue with the api. Your type only tells the TS compiler what you expect here. It's on you to ensure the api is returning the correct type. — ps2goat, Jul 28 '21 at 21:06
you can display the content of an object with: https://angular.io/api/common/KeyValuePipe — robert, Jul 28 '21 at 21:10

score 0 · Answer 1 · answered Jul 28 '21 at 21:08

0

To avoid the map operator you should use Lodash:

const array = _.values(obj);

You can review the documentation here https://lodash.com/docs/4.17.15#values

answered Jul 28 '21 at 21:08

Andres Doncel

44
4

score 0 · Answer 2 · answered Jul 29 '21 at 19:02

This code returns an array of values but is missing the keys.

  fetchForceDetail(){
    return this.http
    .get<ForceDetail[]>('https://data.police.uk/api/forces/' + this.force.id)
    .pipe(map(responseData => {
      const detailArray = [];
      for (const key in responseData) {
      if (responseData.hasOwnProperty(key))
        detailArray.push(responseData[key])
      }
      return detailArray;
    }))
    .subscribe(forcedetails => {
      console.log(forcedetails);
  });
}

The array returned:

[
    "<p>Bedfordshire Police is dedicated to protecting people and fighting crime together.</p>\n\n<p>At 477 square miles and with 664,500 people Bedfordshire is one of England’s smallest, yet most diverse, counties and faces complex crime challenges more usually seen in large metropolitan cities.</p>\n\n<p>More than half of its residents live in its largest towns, Luton and Bedford, which have diverse and often transient communities, alongside smaller market towns and rural parishes.</p>\n\n<p>Bedfordshire is a hub of transport link with London Luton Airport, the UK’s fifth busiest, the M1 and A1(M)motorways which traverse the county, and two principle railway lines that connect people with the heart of London in less than an hour.</p>\n\n<p>Bedfordshire has a complex mix of volume crime, serious crimes, drugs, gangs and terrorism threats.Every day our officers meet threats, harm and risks like those in large cities.</p>\n\n<p>Despite our relatively small size, we lead joint protective services which include Armed Policing, Dogs, Roads Policing and the Major Crime, for Bedfordshire, Cambridgeshire and Hertfordshire and are the lead force for the Eastern Region Special Operations Unit – a co - ordinated approach from seven forces in the region to tackle serious and organised crime and terrorism.</p>",
    "http://www.bedfordshire.police.uk",
    [
        {
            "url": "https://www.bedfordshire.police.uk/",
            "type": null,
            "description": "<p>Latest news, information about crime, crime reduction advice and information about your area can be found on our website.<br />We offer a range of online services for reporting crime and suspicious activity, requesting information, giving feedback and applying for jobs.See our website for details of all our online services.</p>",
            "title": "Bedfordshire Police"
        },
        {
            "url": "http://www.facebook.com/bedspolice",
            "type": null,
            "description": "<p>Bedfordshire Police on Facebook</p>",
            "title": "Bedfordshire Police on Facebook"
        },
        {
            "url": "http://twitter.com/bedspolice",
            "type": null,
            "description": "<p>Bedfordshire Police on Twitter</p>",
            "title": "Bedfordshire Police on Twitter"
        },
        {
            "url": "http://www.youtube.com/bedfordshirepolice",
            "type": null,
            "description": "<p>Bedfordshire Police on YouTube</p>",
            "title": "Bedfordshire Police on YouTube"
        }
    ],
    "101",
    "bedfordshire",
    "Bedfordshire Police"
]

Angular GET returns Object instead of Array

2 Answers2