Treat multidimensional array in Angularjs

Question

I have that function:

getProducts(){
    this.auth.getProducts().subscribe(data => {

        this.turmas = [];
        this.produtos = [];
        this.cursos = [];

        for (var i = 0; i < Object.keys(data).length; i++ ) {
            this.turmas.push(data[i].get_team);

            if (Object.keys(data[i].get_team.get_products).length > 1) {
                for (var k = 0; k < Object.keys(data[i].get_team.get_products).length; k++) {
                    this.produtos.push(data[i].get_team.get_products[k].get_product);
                }
            } else {
                for (var k = 0; k < Object.keys(data[i].get_team.get_products[0].get_product.get_courses).length; k++) {
                    for (var l = 0; l < Object.keys(data[i].get_team.get_products[0].get_product.get_courses[k].get_course.get_class).length; l++) {
                        console.log(data[i].get_team.get_products[0].get_product.get_courses[k].get_course.get_class[l]);
                    }
                }
            }

        }
    });
}

And this HTML:

<div text-center class="video-container" *ngFor="let turma of turmas">
    <div class="titles">
        <div class="icon_folder"> <ion-icon name='folder' color="legendary" item-right></ion-icon></div><b style="font-size: auto;">{{turma.name}}</b>
    </div>
    <ion-slides pager>
        <ion-slide *ngFor="let produto of turma.produtos" style="background-color: red">
            <h2>{{produto.name}}</h2>
        </ion-slide>
    </ion-slides>
</div>  

This is the JSON:

    "1": {
    "id": 12023,
    "team_id": 5,
    "user_id": 369,
    "teacher": null,
    "status": 1,
    "created_at": "2017-05-15 00:00:00",
    "updated_at": "2017-05-15 00:00:00",
    "get_team": {
      "id": 5,
      "companie_id": 3,
      "name": "Ferramentas",
      "avaliation_type": null,
      "status": 1,
      "created_at": "2017-04-03 19:29:45",
      "updated_at": "2017-04-03 19:29:45",
      "get_products": [
        {
          "id": 77,
          "team_id": 5,
          "product_id": 5,
          "status": 1,
          "created_at": "2017-04-17 18:44:46",
          "updated_at": "2017-04-17 18:44:46",
          "get_product": {
            "id": 5,
            "companie_id": 2,
            "name": "Ferramentas",
            "image": null,
            "cover": null,
            "description": "",
            "tag": "ferramentas",
            "status": 1,
            "created_at": "2017-04-03 13:25:01",
            "updated_at": "2017-04-03 13:25:01",
            "get_courses": [
              {
                "id": 4,
                "course_id": 4,
                "product_id": 5,
                "status": 1,
                "created_at": "2017-03-31 19:56:36",
                "updated_at": "2017-04-04 00:22:47",
                "companie_id": 2,
                "activity_initial": null,
                "activity_final": null,
                "name": "Ferramentas de Gestão",
                "image": null,
                "theme": "#000000",
                "description": "Você está prestes a fazer o download de 26 ferramentas de gestão. Se possuir duvidas não deixe de entrar em contato conosco: [email protected]",
                "tag": "",
                "get_course": {
                  "id": 4,
                  "companie_id": 2,
                  "activity_initial": null,
                  "activity_final": null,
                  "name": "Ferramentas de Gestão",
                  "image": null,
                  "theme": "#000000",
                  "description": "Você está prestes a fazer o download de 26 ferramentas de gestão. Se possuir duvidas não deixe de entrar em contato conosco: [email protected]",
                  "tag": "",
                  "status": 1,
                  "created_at": "2017-03-31 19:56:36",
                  "updated_at": "2017-04-04 00:22:47",
                  "get_class": [
                    {
                      "id": 28,
                      "companie_id": 2,
                      "course_id": 4,
                      "topic_id": 4,
                      "video_id": null,
                      "activity_initial": null,
                      "activity_final": null,
                      "activity_confirm": null,
                      "time": null,
                      "name": "Modelos de ferramentas",
                      "type_class": 3,
                      "order": null,
                      "content": null,
                      "whattodo": null,
                      "description": "<p>Você está prestes a fazer o download de 26 ferramentas de gestão. Se possuir duvidas não deixe de entrar em contato conosco: [email protected]</p>",
                      "tag": null,
                      "image": "companies/2/classes/03a8593a3fab785d4571af102eb11f86.png",
                      "status": 1,
                      "created_at": "2017-04-03 13:26:56",
                      "updated_at": "2017-04-03 22:19:23"
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  },

The intention is to make one appear div with the title of the class and inside the slides with the products of the respective class, but the products are repeating in all classes and not taking the specific class.

Thank you.

Answer 1

The problem is in the mounting of these arrays. You created two arrays (gang and products) that do not have the slightest relationship with each other. In fact, I understand that you do not even need to create these arrays in hand, the json is ready for you to use like this:

getProducts(){
    this.auth.getProducts().subscribe(data => {

        this.turmas = data;

    });
}

Then just arrange the name of the properties in your HTML:

<div text-center class="video-container" *ngFor="let turma of turmas">
    <div class="titles">
        <div class="icon_folder"> <ion-icon name='folder' color="legendary" item-right></ion-icon></div><b style="font-size: auto;">{{turma.get_team.name}}</b>
    </div>
    <ion-slides pager>
        <ion-slide *ngFor="let produto of turma.get_team.get_products" style="background-color: red">
            <h2>{{produto.get_product.name}}</h2>
        </ion-slide>
    </ion-slides>
</div>  

I believe that this would be enough to work.

---

But if you still want to assemble these objects in hand, So we need to at least sort out the hierarchy between class and product. To place products within the correct classes, we need to have a single array like this:

getProducts(){
    this.auth.getProducts().subscribe(data => {

        this.turmas = []; // um único array...

        for (var i = 0; i < Object.keys(data).length; i++ ) {

            this.turmas.push(data[i].get_team);
            // inicializar os produtos da turma atual...
            this.turmas[i].produtos = [];

            if (Object.keys(data[i].get_team.get_products).length > 1) {
                for (var k = 0; k < Object.keys(data[i].get_team.get_products).length; k++) {
                    // ao invés de adicionar o produto a um array "this.produtos"
                    // completamente isolado, adicionamos ao array de produtos da turma atual...
                    this.turmas[i].produtos.push(data[i].get_team.get_products[k].get_product);
                }
            } else {
                // como o código abaixo só faz "console.log", não alterei nada...
                for (var k = 0; k < Object.keys(data[i].get_team.get_products[0].get_product.get_courses).length; k++) {
                    for (var l = 0; l < Object.keys(data[i].get_team.get_products[0].get_product.get_courses[k].get_course.get_class).length; l++) {
                        console.log(data[i].get_team.get_products[0].get_product.get_courses[k].get_course.get_class[l]);
                    }
                }
            }

        }
    });
}

This way you don’t even need to touch the original HTML, but it’s up to you to choose how to solve it.