我有一个API服务,可从API获取笔记本电脑组对象。 laptopgroups数组中有三个laptopgroup对象。当从数组中选择一个特定的笔记本电脑组时,javascript会返回“ undefined”,但它肯定在那里。
constructor(private as: ApiServiceService,) {
}
ngOnInit() {
//selecteer de beste laptop voor 1
this.laptopsGroups = this.as.getAllLaptopGroups();
console.log(this.laptopsGroups);
console.log(this.laptopsGroups[0]);
控制台显示“ laptopGroups”数组中有对象,但是当我尝试选择第一个对象时,我得到“未定义”:
谢谢!
第二次编辑:(包括完整的JSON文件)
JSON:
[
{
"c1": {
"imgUrl": "http://localhost:4200/assets/tempResult/mba.jpeg",
"name": "Macbook Air",
"budget": 1,
"pros": [
"test1",
"test2",
"test3"
],
"color": "G",
"allStores": [
{
"name": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
{
"name": "Amac",
"amount": 1219.0,
"url": "https://coolblue.nl/"
},
{
"name": "Bol.com",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
null
],
"storeName": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
"c2": {
"imgUrl": "http://localhost:4200/assets/tempResult/mbp.jpeg",
"name": "Macbook Air",
"budget": 1,
"pros": [
"test1",
"test2",
"test3"
],
"color": "SG",
"allStores": [
{
"name": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
{
"name": "Amac",
"amount": 1219.0,
"url": "https://coolblue.nl/"
},
{
"name": "Bol.com",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
null
],
"storeName": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
"c3": {
"imgUrl": "http://localhost:4200/assets/tempResult/mbp.jpeg",
"name": "Macbook Air",
"budget": 1,
"pros": [
"test1",
"test2",
"test3"
],
"color": "LG",
"allStores": [
{
"name": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
{
"name": "Amac",
"amount": 1219.0,
"url": "https://coolblue.nl/"
},
{
"name": "Bol.com",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
null
],
"storeName": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
}
},
{
"c1": {
"imgUrl": "http://localhost:4200/assets/tempResult/mba.jpeg",
"name": "Macbook Air",
"budget": 1,
"pros": [
"test1",
"test2",
"test3"
],
"color": "G",
"allStores": [
{
"name": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
{
"name": "Amac",
"amount": 1219.0,
"url": "https://coolblue.nl/"
},
{
"name": "Bol.com",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
null
],
"storeName": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
"c2": {
"imgUrl": "http://localhost:4200/assets/tempResult/mbp.jpeg",
"name": "Macbook Air",
"budget": 1,
"pros": [
"test1",
"test2",
"test3"
],
"color": "SG",
"allStores": [
{
"name": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
{
"name": "Amac",
"amount": 1219.0,
"url": "https://coolblue.nl/"
},
{
"name": "Bol.com",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
null
],
"storeName": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
"c3": {
"imgUrl": "http://localhost:4200/assets/tempResult/mbp.jpeg",
"name": "Macbook Air",
"budget": 1,
"pros": [
"test1",
"test2",
"test3"
],
"color": "LG",
"allStores": [
{
"name": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
{
"name": "Amac",
"amount": 1219.0,
"url": "https://coolblue.nl/"
},
{
"name": "Bol.com",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
null
],
"storeName": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
}
},
{
"c1": {
"imgUrl": "http://localhost:4200/assets/tempResult/mba.jpeg",
"name": "Macbook Air",
"budget": 1,
"pros": [
"test1",
"test2",
"test3"
],
"color": "G",
"allStores": [
{
"name": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
{
"name": "Amac",
"amount": 1219.0,
"url": "https://coolblue.nl/"
},
{
"name": "Bol.com",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
null
],
"storeName": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
"c2": {
"imgUrl": "http://localhost:4200/assets/tempResult/mbp.jpeg",
"name": "Macbook Air",
"budget": 1,
"pros": [
"test1",
"test2",
"test3"
],
"color": "SG",
"allStores": [
{
"name": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
{
"name": "Amac",
"amount": 1219.0,
"url": "https://coolblue.nl/"
},
{
"name": "Bol.com",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
null
],
"storeName": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
"c3": {
"imgUrl": "http://localhost:4200/assets/tempResult/mbp.jpeg",
"name": "Macbook Air",
"budget": 1,
"pros": [
"test1",
"test2",
"test3"
],
"color": "LG",
"allStores": [
{
"name": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
{
"name": "Amac",
"amount": 1219.0,
"url": "https://coolblue.nl/"
},
{
"name": "Bol.com",
"amount": 1159.0,
"url": "https://coolblue.nl/"
},
null
],
"storeName": "Coolblue",
"amount": 1159.0,
"url": "https://coolblue.nl/"
}
}
]
编辑3:
API服务:
export class ApiServiceService {
readonly ROOT_URL = "http://localhost:8080/laptops";
public laptopGroup: LaptopGroup;
public laptopGroups: LaptopGroup[];
public laptopGroups2: Observable<LaptopGroup[]>;
constructor(private httpClient: HttpClient) {
this.laptopGroups = [];
var obs = this.getAllLaptopGroupsFromJson();
obs.subscribe((laptopGroups) => {
if (laptopGroups !== null) {
var arr = Object.values(laptopGroups);
this.convertToLaptopGroup(arr);
}
});
console.log(this.laptopGroups);
}
getAllLaptopGroupsFromJson() {
this.laptopGroups2 = this.httpClient.get<LaptopGroup[]>(this.ROOT_URL);
return this.laptopGroups2;
}
getAllLaptopGroups() {
return this.laptopGroups;
}
convertToLaptopGroup(laptopGroupsArrFromJson) {
for (let i = 0; i < laptopGroupsArrFromJson.length; i++) {
if(laptopGroupsArrFromJson[i] !== null) {
let laptopGroup = new LaptopGroup();
laptopGroup.c1 = new Laptop();
laptopGroup.c1.amount = laptopGroupsArrFromJson[i].c1.amount;
laptopGroup.c1.imgUrl = laptopGroupsArrFromJson[i].c1.imgUrl;
laptopGroup.c1.pros = laptopGroupsArrFromJson[i].c1.pros;
laptopGroup.c1.buget = laptopGroupsArrFromJson[i].c1.budget;
laptopGroup.c1.colour = laptopGroupsArrFromJson[i].c1.color;
laptopGroup.c1.storeName = laptopGroupsArrFromJson[i].c1.storeName;
laptopGroup.c1.url = laptopGroupsArrFromJson[i].c1.url;
laptopGroup.c1.allStores = laptopGroupsArrFromJson[i].c1.allStores;
laptopGroup.c2 = new Laptop();
laptopGroup.c2.amount = laptopGroupsArrFromJson[i].c2.amount;
laptopGroup.c2.imgUrl = laptopGroupsArrFromJson[i].c2.imgUrl;
laptopGroup.c2.pros = laptopGroupsArrFromJson[i].c2.pros;
laptopGroup.c2.buget = laptopGroupsArrFromJson[i].c2.budget;
laptopGroup.c2.colour = laptopGroupsArrFromJson[i].c2.color;
laptopGroup.c2.storeName = laptopGroupsArrFromJson[i].c2.storeName;
laptopGroup.c2.url = laptopGroupsArrFromJson[i].c2.url;
laptopGroup.c2.allStores = laptopGroupsArrFromJson[i].c2.allStores;
laptopGroup.c3 = new Laptop();
laptopGroup.c3.amount = laptopGroupsArrFromJson[i].c3.amount;
laptopGroup.c3.imgUrl = laptopGroupsArrFromJson[i].c3.imgUrl;
laptopGroup.c3.pros = laptopGroupsArrFromJson[i].c3.pros;
laptopGroup.c3.buget = laptopGroupsArrFromJson[i].c3.budget;
laptopGroup.c3.colour = laptopGroupsArrFromJson[i].c3.color;
laptopGroup.c3.storeName = laptopGroupsArrFromJson[i].c3.storeName;
laptopGroup.c3.url = laptopGroupsArrFromJson[i].c3.url;
laptopGroup.c3.allStores = laptopGroupsArrFromJson[i].c3.allStores;
this.laptopGroups.push(laptopGroup);
}
}
}
}