Использование вложенного сопоставления в подписке 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"
}

Теперь - моя цель - получить атрибут 'name', а также первое значение 'grade' в атрибуте grades из каждого объекта ответа - и отобразить их в отдельные массивы, чтобы я мог отображать их в столбцах таблицы с помощью * 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 of Array, такие как -

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 - так что я уверен, что что-то напутал.

Каков наилучший способ получить значения оценок в массиве с помощью вложенного отображения в подписке?Или есть лучший подход к тому же?

Также - ради простоты, игнорируйте тот факт, что присутствует первая подписка (для атрибута имени) - я показал это здесь, чтобы прояснить этоотносительно того, чего я хочу достичь.

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.Я говорю может , потому что приведенный ниже фрагмент кода не проверен.

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

Предполагая, что nameAndScores$ является свойством экземпляра вашего компонента, вы можете выполнить *ngFor item in nameAndScores$ | async и избежать любых явных подписок.в вашем коде.

Answer 2

Вы используете фигурные скобки с жирной стрелкой во второй функции карты.При использовании фигурных скобок вы должны возвращать значение, используя ключевое слово return.