Angular将JSON转换为KeyValue对

时间:2018-12-26 16:28:10

标签: json angular

我正在尝试将JSON数据转换为KeyValue数组,以便可以将其分配给p-dropdown组件的选项,但是由于某些原因,我无法在数据

键值.ts

JSON.parse()

domains.json

export interface KeyValue {
    text: string;
    value: string;
}

domains.service.ts

{
  "Domains": [
    {"North America (NAM)": "NAM"}, 
    {"Europe (EUR)": "EUR"}, 
    {"Australia (AUS)": "AUS"}, 
    {"Latin America (LAAM)": "LAAM"}, 
    {"Asia (APA)": "APA"}
  ]
}

>>输出

getDomains(): any {
  return this.getJSON().subscribe(data => {
    console.log("JSON data.Domains: " + JSON.stringify(data.Domains)); //See >> output
    let sids: KeyValue[] = JSON.parse(data.Domains); // See >> exception
    return data.Domains;
  });
}

getJSON(): Observable<any> {
  return this.http.get("assets/dd.json")
}

>>例外

  

core.js:1449错误SyntaxError:JSON位置中的意外令牌o   1个       在JSON.parse()       在SafeSubscriber.eval [作为_next](utilitynet.service.ts:25)       在SafeSubscriber .__ tryOrUnsub(Subscriber.js:243)       在SafeSubscriber.next(Subscriber.js:190)       在Subscriber._next(Subscriber.js:131)       在Subscriber.next(Subscriber.js:95)       在MapSubscriber._next(map.js:85)       在MapSubscriber.Subscriber.next(Subscriber.js:95)       在FilterSubscriber._next(filter.js:90)       在FilterSubscriber.Subscriber.next(Subscriber.js:95)

1 个答案:

答案 0 :(得分:2)

data.Domains已经是一个JS对象。因此,您无需在其上调用JSON.parse

只需

let sids: KeyValue[] = data.Domains;

此外,我假设getDomains()是一种您要从组件中调用并仅在其中订阅的方法。

所以只需重构代码:

import { map } from 'rxjs/operators';

...

getDomains(): any {
  return this.getJSON().pipe(
    map(data => data.Domains)
  );
}

...

getJSON(): Observable < any > {
  return this.http.get("assets/dd.json")
}

然后您可以像这样在组件中使用它:

this.domainsservice.getDomains()
  .subscribe(domains => {
    console.log(domains);
    ...
  });