将字符串转换为角度 4 的对象数组答案

【问题标题】：Convert string to array of objects angular 4将字符串转换为角度 4 的对象数组
【发布时间】：2018-07-20 06:24:14
【问题描述】：

我有这个 api 响应：

{
   "status": "success",
   "code": 0,
   "message": "version list",
   "payload" : "[{\"code\":\"AB\",\"short\":\"AB\",\"name\":\"Alberta\",\"country\":\"CA\"},{\"code\":\"BC\",\"short\":\"BC\",\"name\":\"British Columbia\",\"country\":\"CA\"}]"

}

我正在尝试获取不同负载对象的名称。此处的有效载荷，以字符串形式返回。

所以当我尝试获取对象的名称时它不起作用！

getAllPayload() {
  this.myService.getpayload().subscribe(
     data => {
        this.values= data;
     }
   );
}

和

<select class="form-control">                     
   <option *ngFor="let value of values.payload" >
      {{value.name}}
   </option>
</select>

当我尝试通过 JSON.parse 解析对象时，它不起作用

我必须怎么做才能解析有效负载并获取不同的名称？

【问题讨论】：

this.values = JSON.parse(data.payload)。然后let value of values
@FedericoklezCulloca 不，这不是实际的回复，当我将回复放入问题中时，我已经删除了一些数据，所以我已经转义了引用.. 我通过有效回复更新了问题..
@G.Ab 注意到并删除了评论

标签： javascript json angular typescript object

【解决方案1】：

您的字符串中有未转义的引号。一旦那些被逃脱，比：

JSON.parse()

var res = {
"payload" : "[{\"code\":\"AB\",\"short\":\"AB\",\"name\":\"Alberta\",\"country\":\"CA\"},{\"code\":\"BC\",\"short\":\"BC\",\"name\":\"British Columbia\",\"country\":\"CA\"}]"
};
  
var payloadArray = JSON.parse(res.payload);
console.log( payloadArray )
console.log( Array.isArray(payloadArray) ) // true

【讨论】：

【解决方案2】：

你可以这样做：

getAllPayload() {
this.myService.getpayload().subscribe(
    data => {
    this.values= JSON.parse(data.payload) // this line converts the payload string to array.

    ;
  }
 );

然后在模板中

<option *ngFor="let value of values" >
     {{value.name}}</option>
 </select>

希望你能得到解决方案。

【讨论】：