Javascript 在可观察订阅中使用嵌套映射-Angular6

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

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

下面是一个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"
}

现在-我的目标是从每个响应对象获取“name”属性以及grades属性中的第一个“grade”值-并将它们映射到单独的数组中，以便使用*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)]

它们中的每一个都由对象的“等级”属性数组组成。 （从上面取第一个数组）——

因此-我进一步映射了我的初始响应以获得“等级”值。此外-我只想要第一个等级-因此我添加了一个简单的条件，如下所示-

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

console.log（（data2.response.map（grade=>grade.grades））
.地图（等级）
=>{grades.map（（值，索引）=>{if（index您在第二个映射函数中使用了带粗箭头的大括号。在使用大括号时，您应该使用
return
关键字返回值。
以下是我认为您需要的，因为您从未给出您试图映射/减少的内容的具体示例。此外，这是普通JavaScript，但很容易转换在RxJS中被标记


//我假设对`dataservece.getAPIData（）`的调用返回一个数组
常数api_响应=[{
“地址”：{
“建筑”：“1234”，
“坐标”：[0,0]，
“街道”：“123大街”，
“zipcode”：“00000”
},
“地址2”：“测试套件000”，
“职系”：[{
“等级”：“A”，
“分数”：3分
}, {
“等级”：“B”，
“分数”：4分
}, {
“等级”：“A”，
“分数”：2分
}],
“姓名”：“约翰·多伊”，
_id:“1212121”
}];
//映射并提取所需的值
const result=api_response.map（v=>[v.name，v.grades[0].score]）
//或者作为一个对象数组
const obj_result=result.map（（[name，score]）=>（{name，score}））
//这是你想要的吗？
log（'Array'，result）；
console.log（'Objects'，obj_结果）
从外观上看，它与可观察对象无关，您更关心的是如何将响应映射到新的数据结构中，对吗？是的-我不确定这是否是映射问题，或者我在“订阅”中的实现方式有什么问题-不确定映射为什么不能以这种方式工作-我尝试用stor分隔将每个映射映射到一个变量似乎都可以。但我确实需要它，因为它在subscribe中。不确定这是否有意义，如果需要，我可以提供更多细节。您是否将相同的
DataService
注入两次？是否每次调用
getAPIData
都会返回您发布的相同JSON对象？您为什么要尝试这样做在subscribe中映射/减少值，而不是使用操作符的管道链？您的意思是-console.log（（data2.response.map（grade=>grade.grades））.map（grades=>{grades.map（（value，index）=>{if（indexcan您可以添加一个data2.ResponseEyes的示例-您是对的-它确实返回一个数组。但是我只想获取第一个“grade”属性，而不是“score”。另外-这可以在subscribe中完成，而不声明const-just console.log映射结果吗？我仍然不清楚您想要返回什么数据结构？我已经更新了ans我们可以从嵌套的grades数组中提取
score
。使用RxJS，您可以通过一系列运算符“推送”数据，而不是“拉取”，来执行相同的逻辑你所指的
const
将在操作员链中生成，并通过流推送，而不是将其拉入
subscribe
中进行处理。这几乎是我想要的-我理解这里正在做什么，但问题仍然存在，我有很多数据-因此响应是一个数组对象数组[[“John Doe”，3]，“Jeff Doe”，4]，…]-我不知道如何在元素中获得每个值来显示它们。如果您愿意，我可以提供控制台显示内容的屏幕截图。也许屏幕截图会有所帮助。但即使是
[[name，score]，[name，score]，…]的数组也可以轻松映射到
[{name，score}，{name，score}，…]
。这就是你需要的吗？再次更新。非常感谢！我完全迷失在可观察的概念上，忘记了我可以使用vanilla JS来完成这项工作-再次感谢你的帮助！