Treat multidimensional array in AngularJS

Navigation
0

I have this 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 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 show a div with the title of the class and within the slides with the products of the respective class, however the products are repeating in all the classes and not picking the one of the specific class.

Thank you.

    
asked by anonymous 17.05.2017 / 16:01

1 answer

0

The problem is in the assembly of these arrays. You have created two arrays ( class and products ) that have no relationship to one another. In fact, I understand you do not even need to create these arrays in hand, json is ready for you to use this way: 

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

        this.turmas = data;

    });
}

Then just name 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 understand that this would be enough to work.

But if you still want to put these objects on hand , then we need to at least sort out the hierarchy between the class and the product. To put 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]);
                    }
                }
            }

        }
    });
}

That way you do not even have to tinker with the original HTML, but it's up to you to decide how to resolve it.

    
20.05.2017 / 02:56
Create condition in statement Page does not load because of transaction