Angular GET 返回对象而不是数组

时间:2021-07-28 21:01:58

标签: angular typescript rest get jsobject

在使用 Angular 的 REST API 时,我的 GET 请求返回一个对象。我希望有一个数组,以便我可以使用属性绑定对内容进行切片和显示。

我觉得该解决方案涉及'map'函数,但之前的尝试导致每个字段的每个字母都有一个键:值对(!)。

我在 HTML 中尝试了 KeyValuePipe,但没有看到任何不确定我哪里出错的地方。

我的 .ts 可能没有返回任何值吗??

我的 component.ts 代码:

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

我的 html:

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

返回的对象:

{
  "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"
}

2 个答案:

答案 0 :(得分:0)

为了避免地图操作符,你应该使用 Lodash:

const array = _.values(obj);

您可以在此处查看文档https://lodash.com/docs/4.17.15#values

答案 1 :(得分:0)

此代码返回一个值数组,但缺少键。

  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);
  });
}

返回的数组:

[
    "<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"
]