在 Typescript/JavaScript 中循环遍历 JSON 数据答案

【问题标题】：Looping Over JSON data in Typescript/JavaScript在 Typescript/JavaScript 中循环遍历 JSON 数据
【发布时间】：2020-01-08 23:20:11
【问题描述】：

目前我正在使用嵌套的 forEach 遍历 JSON 数据。但我想知道在 typescript 或 RXJS 中是否有任何其他简单可行的方法，因为我在少数情况下也在迭代 Observable。这里是代码 sn-p 和 stackblitz https://stackblitz.com/edit/angular-dz3wl2?file=src%2Fapp%2Fapp.component.ts

遍历 JSON 应该返回我在 htmltypes 数组和 inlineTags 数组中具有属性“type”的对象。有人可以指导我在不使用 forEach 方法的情况下检索我想要的对象吗？

content.data.areas.forEach(sectionBlock => {
  sectionBlock.sections.forEach(obj => {
    obj.htmltypes.forEach(val => {
      console.log(val);
      if (val.inlineTags.length > 0) {
        val.inlineTags.forEach(tag => {
          console.log(tag);
        })
      }
    })
  })
})

【问题讨论】：

使用for(let key in obj){ // Your Code here }

标签： json angular typescript

【解决方案1】：

没有更简单的方法可以做到这一点，但是您可以使用一些 rxjs 或数组运算符减少它的嵌套，例如 Array.prototype.flatMap，但要使用它，您应该为它添加 polyfill，如 core-js/es7/array/flat-map。你的代码看起来像

content.data.areas
 .flatMap(sectionBlock => sectionBlock.sections)
 .flatMap(obj => obj.htmltypes)
 .flatMap(val => val.inlineTags)
 .forEach(tag => console.log(tag));

使用 rxjs 可以以某种方式完成，例如

from(content.data.areas).pipe(
 concatMap(sectionBlock => sectionBlock.sections)
 concatMap(obj => obj.htmltypes)
 concatMap(val => val.inlineTags)
).subscribe(tag => console.log(tag));

【讨论】：