将JSON转换为键值对

我正在尝试将JSON数据转换为

KeyValue

数组，以便将其分配给

p-dropdown

组件的选项，但由于某些原因，我无法对数据调用

JSON.parse（）

键值。ts

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

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

domains.json

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

domains.service.ts

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

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

>例外情况

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

core.js:1449错误SyntaxError:JSON中位于位置的意外标记o 1. 在JSON.parse（）处 在SafeSubscriber.eval[as_next]（utilitynet.service.ts:25） 在保险箱订阅者处（订阅者.js:243） 在SafeSubscriber.next（Subscriber.js:190） 在订阅服务器上。\u下一步（Subscriber.js:131） 在Subscriber.next（Subscriber.js:95） 在MapSubscriber._next（map.js:85） 在MapSubscriber.Subscriber.next（Subscriber.js:95） 在FilterSubscriber.\u下一步（filter.js:90） 在FilterSubscriber.Subscriber.next（Subscriber.js:95）

---

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

---

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

---

@AK47刚刚更新了答案，说明了如何使用它来获取组件中的实际域值。@AK47刚刚更新了答案，说明了如何使用它来获取组件中的实际域值。