0

Tenho essa função:

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]);
                    }
                }
            }

        }
    });
}

E esse 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>  

Esse é o 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"
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  },

A intenção é fazer aparecer uma div com o título da turma e dentro os slides com os produtos da respectiva turma, porém os produtos estão repetindo em todas as turmas e não pegando o da turma específica.

Obrigado.

4
  • Consegue colocar um exemplo na variável data?
    – Sorack
    Commented 17/05/2017 às 14:08
  • Sorack a variavel data é um objeto com varios objetos dentro mais ou menos assim ` { "0": { "id": 12022, "team_id": 6, "user_id": 369, "teacher": 0, "status": 1, "created_at": "2017-05-15 00:00:00", "updated_at": "2017-05-15 00:00:00", "get_team": { "id": 6, "companie_id": 4, "name": "Extensivo E+", "avaliation_type": null, "status": 1, "created_at": "2017-04-05 14:00:14", "updated_at": "2017-04-05 14:00:14", "get_products": [ {` Um pouco maior, mas só pra vc entender Commented 17/05/2017 às 14:09
  • Edita a sua pergunta e coloca o JSON completo, por favor
    – Sorack
    Commented 17/05/2017 às 14:42
  • Pronto Sorack!! Commented 17/05/2017 às 14:56

1 Resposta 1

0

O problema está na montagem desses arrays. Você criou dois arrays (turma e produtos) que não possuem a menor relação um com o outro. Na verdade, eu entendo que você nem mesmo precisa criar esses arrays na mão, o json está prontinho para você utilizar assim:

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

        this.turmas = data;

    });
}

Daí basta arrumar o nome das propriedades em seu 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>  

Entendo que isso seria suficiente para funcionar.


Mas se mesmo assim você quer montar esses objetos na mão, então precisamos ao menos arrumar a hierarquia entre turma e produto. Para colocar os produtos dentro das turmas corretas, precisamos ter um único array assim:

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]);
                    }
                }
            }

        }
    });
}

Dessa forma você nem precisa mexer no HTML original, mas fica a seu cargo optar como resolver isso.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .