Как l oop через объект из API, который представляет собой пару случайных значений ключа? (Angular)

Question

У меня есть ответ api с сервера, который похож на

    {
      "name1":["value1","value2"],
      "name2":["value3","value4"],
      "name3":["value5","value6"],
       .......
}

Я могу отобразить здесь ключ. Но я хочу знать, как l oop через массив, содержащий значения.

.ts файл

this.apiService.getDetails().subscribe((res) => {
      console.log(res);
    this.initialDataSource=new MatTableDataSource();
      this.initialDataSource=res;
      const transformedData = [];
      Object.keys(this.initialDataSource).forEach((data) => {
        transformedData.push({'key': data, 'value': `${this.initialDataSource[data]}`});
      })
      console.log(transformedData);
      this.dataSource = new MatTableDataSource(transformedData);
      this.dataSource.paginator=this.paginator;
      this.dataSource.sort=this.sort;

  });  

В настоящее время он принимает весь массив значений как одну строку, поэтому я ' m не может l oop через него и отображать каждый элемент в массиве значений.

Пожалуйста, помогите мне решить эту проблему.

Answer 1

В вашем коде много ошибок.

Вы воздействуете на new MatTableDataSource на вашу переменную initialDataSource, а в следующей строке вы стираете это влияние, воздействуя на res на initialDataSource .

На вашем l oop вы преобразуете this.initialDataSource[data] в строку с помощью интерполяции.

Вот каким должен быть ваш код:

this.apiService.getDetails().subscribe((res) => {
      const transformedData = [];
      Object.keys(res).forEach((data) => {
            transformedData.push({ key: data, value: res[data] });
      })
      this.dataSource = new MatTableDataSource(transformedData);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
});  

Вы можете упростите вам l oop через ключи, используя карту :

this.apiService.getDetails().subscribe((res) => {
      const transformedData = Object.keys(res).map((data) => ({ key: data, value: res[data] }));
      this.dataSource = new MatTableDataSource(transformedData);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
});