时间戳

首页 > 解决方案 > Angular 将 JSON 转换为 KeyValue 对

json - Angular 将 JSON 转换为 KeyValue 对

问题描述

我正在尝试将我的 JSON 数据转换为KeyValue数组，以便可以将其分配给p-dropdown组件的选项，但由于某种原因，我无法调用JSON.parse()数据

键值.ts

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

域.json

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

域.service.ts

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

>> 输出

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

>> 异常

core.js:1449 错误语法错误：在 SafeSubscriber.eval [as _next] (utilitynet.service.ts:25) 处的 JSON.parse () 位置 1 处的 JSON 中的意外标记 o 在 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)

标签： jsonangular

解决方案

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

推荐阅读