将可观察响应映射为 Angular 中的自定义接口数组

Question

我有一个Observable keyValue(): Observable<{[id: number]: string;}>;

Observable 的参数是：

{
    [id: number]: string;
}

如您所见，第二个参数没有命名

现在我之前 Observable 的一个结果是：

{1: 'Bad', 2: 'Good', 3: 'Worst', 4: 'Best', 5: 'Mean'}

我需要翻译成一个数组：

interface NumberKeyValue {
   id: number;
   value: string;
 }

我正在尝试：

.keyValue()
  .pipe(
    map((kv) => {
      console.log(kv);
      const jsonObject = JSON.parse(JSON.stringify(kv));
      console.log(jsonObject);
      const nkvArray: NumberKeyValue[] = [];
      for (const item of jsonObject) {
        console.log(item);
        const nkv: NumberKeyValue = {
          id: 8,                                        //How to catch the id number?
          value: 'empty',                               //How to catch the string?
        };
        nkvArray.push(nkv);
      }
      return nkvArray;
    })
  )
  .subscribe((response) => {
    console.log(response);
  });

在前面的代码之后我得到：

TypeError: jsonObject is not iterable
    at MapSubscriber.project (template-sms.facade.ts:295)
    at MapSubscriber._next (map.js:29)
    at MapSubscriber.next (Subscriber.js:49)
    at TapSubscriber._next (tap.js:46)
    at TapSubscriber.next (Subscriber.js:49)
    at SwitchMapSubscriber.notifyNext (switchMap.js:70)
    at InnerSubscriber._next (InnerSubscriber.js:11)
    at InnerSubscriber.next (Subscriber.js:49)
    at MapSubscriber._next (map.js:35)
    at MapSubscriber.next (Subscriber.js:49)

首先，主要是 Question:How 我可以转换成我的 NumberKeyValue 界面的一个数组吗？

其次：这个类型表示有没有名字{[id: number]: string;}？

Answer 1

对象类型确实不可迭代，但您可以使用 Object.keys 获取一组键，然后您可以使用这些键以所需的形式投影数据：

.keyValue()
  .pipe(
    map((kv) => {
      // use object destructuring to get a new reference instead of
      // JSON.parse(JSON.stringify(something))
      const jsonObject = { ...kv };
      return Object.keys(jsonObject).map(key => ({ id: key, value: jsonObject[key] });
    }),
  ).subscribe((response) => {
    console.log(response);
  });

Answer 2

根据Octavian的回答，如您所见，需要强制转换，使用+key而不是key；和一个 NumberKeyValue 接口数组。

  .keyValue()
  .pipe(
    map((kv) => {
      const jsonObject = { ...kv };

      return Object
        .keys(jsonObject)
        .map((key) => {
          const nkv: NumberKeyValue = { id: +key, value: jsonObject[+key] };

          return nkv;
        });
    }),
  )
  .subscribe((response) => {
    console.log(response);
  });

以前，我在想古法。

  .keyValue()
  .pipe(
    map((kv) => {
      const numberKVArray: NumberKeyValue[] = [];
      let response = JSON.stringify(kv);
      response = response.replace(/[{}]/g, '');
      const pairs = response.split('",');
      for (const pair of pairs) {
        const property = pair.split(':"');
        property[0] = property[0].replace(/(^"|"$)/g, '');
        property[1] = property[1].replace(/(^"|"$)/g, '');
        const nkv: NumberKeyValue = {
          id: +property[0],
          value: property[1],
        };
        numberKVArray.push(nkv);
      }

      return numberKVArray;
    }),
    takeUntil(this.destroy$),
  )
  .subscribe((response) => {
    console.log(response);
  });

但是，第一个答案是最好的。

将可观察响应映射为 Angular 中的自定义接口数组

Mapping an observable response as an array of custom interfaces in Angular

arrays

mapping

json

observable

angular