在数组中选择对象时,如果它不是空的打字稿,则返回undefined

时间:2019-11-21 01:12:59

标签: javascript arrays angular typescript

我有一个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”数组中有对象,但是当我尝试选择第一个对象时,我得到“未定义”:

console output

谢谢!

第二次编辑:(包括完整的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);
      }
    }
  }
}

0 个答案:

没有答案