在 Observable 订阅中使用嵌套映射 - Angular6

Question

我正在通过 API 调用（在我的 dataservicse.ts 文件中）获取一些数据 - 我得到的响应是一种复杂的 JSON 结构。我可以在相应的组件文件中获取响应的特定部分，如下所示 -

这是代表一般结构的 JSON 对象响应之一 -

{
    "address": {
        "building": "1234",
        "coord": [0, 0],
        "street": "123 Main Street",
        "zipcode": "00000"
    },
    "address2": "Test Suite 000",
    "grades": [{
        "grade": "A",
        "score": 3
    }, {
        "grade": "B",
        "score": 4
    }, {
        "grade": "A",
        "score": 2
    }],
    "name": "John Doe",
    "_id": "1212121"
}

现在 - 我的目标是从每个响应对象获取“名称”属性以及等级属性中的第一个“等级”值 - 并将它们映射到单独的数组中，以便我可以使用 * 将它们显示在表格列中ngFor.

这是我的组件代码

export class TestDataComponent implements OnInit {

name$: Object;
grade$: Object;

constructor(private data: DataService, private data2: DataService) { }

ngOnInit() {
   //getAPIData is returning the API response from the dataservices.ts file
   this.data.getAPIData().subscribe(
       data=>console.log(data.response.map(name=>name.name))
       ); //this works fine - I get the names in an array

     this.data2.getAPIData().subscribe(
     data2=>console.log((data2.response.map(grade=>grade.grades)).map(grades 
        => {grades.map((value, index) => value.grade})) //this returns an undefined value
  );
 }

现在 - 如果我 console.log((data2.response.map(grade=>grade.grades)) 我得到一个数组对象数组，例如 -

Array - [Array(3), Array(3), Array(2)]

并且它们中的每一个都由对象的'grades'属性数组组成。 （从上面取第一个数组）-

Array(3)
0:{"grade": "A","score": 3}
1:{"grade": "B", "score": 4}
2:{"grade": "A", "score": 2}

因此 - 我进一步映射我的初始响应以实现“等级”值。另外-我只想要一年级-因此我添加了一个简单的条件如下-

console.log((data2.response.map(grade=>grade.grades))
              .map(grades 
                  => {grades.map((value, index) =>{if(index<1) value.grade})}))

正如评论中提到的 - 我得到一个未定义的值。

我不明白这个问题可能相当复杂，但我已尽力尽可能清楚地解释它。我的目标是从每个对象中获取第一个“等级”值并将它们显示在一个数组中 - 就像名称一样，这样我就可以使用它在表格上显示它。

我对 Angular6 还很陌生，刚刚从 Angular 1.6 切换 - 所以我很确定我搞砸了。

通过订阅中的嵌套映射将成绩值放入数组中的最佳方法是什么？或者有更好的方法吗？

另外——为了简单起见，忽略第一个订阅存在的事实（对于 name 属性）——我在这里展示它是为了清楚我想要实现的目标。

Answer 1

这就是我认为你所要求的，因为你从来没有给出你试图映射/减少的具体例子。此外，这是原生 JavaScript，但可以很容易地翻译成 RxJS。

// I am assuming that a call to `DataServce.getAPIData()` returns an array
const api_response = [{
    "address": {
        "building": "1234",
        "coord": [0, 0],
        "street": "123 Main Street",
        "zipcode": "00000"
    },
    "address2": "Test Suite 000",
    "grades": [{
        "grade": "A",
        "score": 3
    }, {
        "grade": "B",
        "score": 4
    }, {
        "grade": "A",
        "score": 2
    }],
    "name": "John Doe",
    "_id": "1212121"
}];

// Map and pluck the values you need
const result = api_response.map(v => [v.name, v.grades[0].score])

// Or as an array of objects
const obj_result = result.map(([name, score]) => ({ name, score }))

// Is this what you want?
console.log('Array', result);
console.log('Objects', obj_result);

快速更新

感谢您接受答案。只是想快速了解一下使用 RxJS 会是什么样子。我说 可能 因为下面的代码 sn-p 未经测试。

this.nameAndScores$ = data.getAPIData().pipe(
  map(({ response }) => response),
  map(({ name, grades }) => ( { name, score: grades[0].score } ))
)

假设nameAndScores$ 是您的组件实例的属性，您可以使用*ngFor item in nameAndScores$ | async 并避免在您的代码中进行任何显式订阅。