Блог

Я хочу сделать цикл для отображения данных из моего json, но я заблокирован в том, как это сделать, я довольно новичок и хочу знать, как это лучше всего сделать.

Вопрос в том, как я могу отобразить значение «имя», зная, что существуют ключи с разными именами?

Заранее спасибо.

пример json

 {
  emptyKey: [],
  mdnCars:
  [
   {
     id: "1254",
     name: "tesla"
   }
  ],
  mdiBrand : [],
  mdnBrand:
  [
   {
     id: "1254",
     name: "renault"
   }
  ]
}
 

ts.файл

   getAll() {
    this.typeService.getAllType().subscribe(result => {
      this.array = result
    });
  }
 

Вы можете пройтись по объекту, чтобы получить ключи и значения.

 for (const [key, value] of Object.entries(yourArray)) {
  if(key !== 'emptyKey') {
    for(const brand in value) {
      console.log(brand);
    }
  }
}
 

У вас есть типичная проблема, для решения которой у меня может быть чистое и подходящее решение.

Теперь, если вы хотите использовать *ngFor в Angular 2 или ng-repeat в Angular, лучшим способом было бы манипулировать данными в соответствии с вашими потребностями.

Принимая во внимание ваш json,

 {
  emptyKey: [],
  mdnCars:
  [
   {
     id: "1254",
     name: "tesla"
   }
  ],
  mdiBrand : [],
  mdnBrand:
  [
   {
     id: "1254",
     name: "renault"
   }
  ]
}
 

Вы хотите только отобразить имя из JSON, напишите вспомогательную функцию, которая может вернуть вам что-то вроде этого

 [
  {
    id: "1254",
    name: "tesla"
  },
  {
    id: "1254",
    name: "renault"
  }
]
 

После получения вышеперечисленного, возможно, вы сможете сразу же использовать директиву Angular в соответствии с вашими потребностями.

Я бы написал вспомогательную функцию, но не уверен в вашем JSON. Пожалуйста, дайте мне знать, если вам это понадобится.

Счастливого кодирования 🙂

 const response = {
  emptyKey: [],
  mdnCars:
  [
   {
     id: "1254",
     name: "tesla"
   }
  ],
  mdiBrand : [],
  mdnBrand:
  [
   {
     id: "1254",
     name: "renault"
   }
  ]
};

const mdnCarsName = response.mdnCars.map(c => c.name);
// Guessing that you can also receive names in mdiBrand array
const mdiBrandsName = response.mdiBrand.map(b => b.name);
const mdnBrandsName = response.mdnBrand.map(b => b.name);

// A list of all cars and brands name, e.g: ['tesla', 'renault']
const allNames = mdnCarsName.concat(mdiBrandsName).concat(mdnBrandsName);
console.log(allNames) 

ИЗМЕНИТЬ:
Вы также можете просто использовать один цикл, здесь я использую reduce , так как уже есть ответ с использованием for

 const excludedKeys = ['emptyKey']

const response = {
  emptyKey: [],
  mdnCars:
  [
   {
     id: "1254",
     name: "tesla"
   }
  ],
  mdiBrand : [],
  mdnBrand:
  [
   {
     id: "1254",
     name: "renault"
   }
  ]
};


const list =

Object.entries(response).reduce((acc, [key, value]) => {

    if (excludedKeys.includes(key))
        return acc;

    // You can get just the names with map(n => n.name), here i'm returning also the id's
    acc.push(value.map(n => n));

    return acc;
}, []).flat(1);

console.log(list) 

ПРАВКА 2
Я оставляю здесь простой проверяемый пример в angular:
app.component.ts

 import { Component } from "@angular/core";
import { Observable } from "rxjs";

interface IMyResponse {
  emptyKey: any[];
  mdnCars: Item[];
  mdiBrand  : Item[];
  mdnBrand: Item[];
}

interface Item {
  id: string;
  name: string;
}

function getObservable(): Observable<IMyResponse> {
  return new Observable((observer) => observer.next({
    emptyKey: [],
    mdnCars:
    [
     {
       id: "1254",
       name: "tesla"
     }
    ],
    mdiBrand : [],
    mdnBrand:
    [
     {
       id: "1254",
       name: "renault"
     }
    ]
  }));
}


@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  data: Item[];
  excludedKeys = ["emptyKey"];

  ngOnInit(): void {
    getObservable().subscribe(resp => this.data = this.transformResponse(resp));
  }

  transformResponse(response: IMyResponse): Item[] {
    return Object.entries(response).reduce((acc, [key, value]) => {

      if (this.excludedKeys.includes(key)) {
          return acc;
      }

      // you can get just the names with map(n => n.name), here i'm returning also the id's
      acc.push(value.map((n: Item) => n));

      return acc;
  }, []).flat(1);
  }
}
 

app.component.html

 <h2>Names</h2>
<ul>
  <li *ngFor="let d of data">
    <div>{{ d.id }} - {{ d.name }}</div>
  </li>
</ul>