Como percorrer um Json | JavaScript | Alura - Cursos online de tecnologia

3
respostas

por Maison Galvão

| 1029.1k xp | 1128 posts

Moderador Desenvolvedor de Sistemas

Boa tarde em meu projeto recebo da API um json que contem uma propridade .data que contem as informações que eu preciso em uma tela. Acontece que esse Json é um Array(11) de eixos de Arrays(de cursos desses eixos). E o que eu preciso está no array mais interno o de cursos.

Eu não estou conseguindo iterar na parte mais interna dele somente no primeiro array, gostaria de saber as soluções cabíveis pra pegar os valores mais internos

[
  {
    "id": 1,
    "nome": "AMBIENTE E SAÚDE",
    "situacao": {
      "id": 1,
      "descricao": "Ativo"
    },
    "cursos": [
      {
        "id": 4,
        "eixo": null,
        "nome": "ALONGAMENTO DE UNHAS",
        "cargaHoraria": 120,
        "idadeMinima": 18,
        "idadeMaxima": null,
        "situacao": {
          "id": 1,
          "descricao": "Ativo"
        },
        "descricao": null,
        "metodologia": {
          "id": 1,
          "descricao": "Dirigida por Instrutor"
        },
        "modalidade": {
          "id": 1,
          "descricao": "Presencial"
        }
      },
      {
        "id": 11,
        "eixo": null,
        "nome": "ATENDENTE DE FARMÁCIA",
        "cargaHoraria": 160,
        "idadeMinima": 18,
        "idadeMaxima": null,
        "situacao": {
          "id": 1,
          "descricao": "Ativo"
        },
        "descricao": null,
        "metodologia": {
          "id": 1,
          "descricao": "Dirigida por Instrutor"
        },
        "modalidade": {
          "id": 1,
          "descricao": "Presencial"
        }
      },
      {
        "id": 13,
        "eixo": null,
        "nome": "BARBEIRO",
        "cargaHoraria": 100,
        "idadeMinima": 18,
        "idadeMaxima": null,
        "situacao": {
          "id": 1,
          "descricao": "Ativo"
        },
        "descricao": null,
        "metodologia": {
          "id": 1,
          "descricao": "Dirigida por Instrutor"
        },
        "modalidade": {
          "id": 1,
          "descricao": "Presencial"
        }
      },
      {
        "id": 14,
        "eixo": null,
        "nome": "CABELEIREIRO",
        "cargaHoraria": 0,
        "idadeMinima": 18,
        "idadeMaxima": null,
        "situacao": {
          "id": 1,
          "descricao": "Ativo"
        },
        "descricao": null,
        "metodologia": {
          "id": 1,
          "descricao": "Dirigida por Instrutor"
        },
        "modalidade": {
          "id": 1,
          "descricao": "Presencial"
        }
      },
      {
        "id": 16,
        "eixo": null,
        "nome": "COLORIMETRIA DE CABELOS",
        "cargaHoraria": 80,
        "idadeMinima": 18,
        "idadeMaxima": null,
        "situacao": {
          "id": 1,
          "descricao": "Ativo"
        },
        "descricao": null,
        "metodologia": {
          "id": 1,
          "descricao": "Dirigida por Instrutor"
        },
        "modalidade": {
          "id": 1,
          "descricao": "Presencial"
        }
      },
      {
        "id": 17,
        "eixo": null,
        "nome": "COMIDA DE BOTECO",
        "cargaHoraria": 90,
        "idadeMinima": 18,
        "idadeMaxima": null,
        "situacao": {
          "id": 1,
          "descricao": "Ativo"
        },
        "descricao": null,
        "metodologia": {
          "id": 1,
          "descricao": "Dirigida por Instrutor"
        },
        "modalidade": {
          "id": 1,
          "descricao": "Presencial"
        }
      },
      {
        "id": 28,
        "eixo": null,
        "nome": "CORTE E ESCOVA DE CABELOS",
        "cargaHoraria": 150,
        "idadeMinima": 18,
        "idadeMaxima": null,
        "situacao": {
          "id": 1,
          "descricao": "Ativo"
        },
        "descricao": null,
        "metodologia": {
          "id": 1,
          "descricao": "Dirigida por Instrutor"
        },
        "modalidade": {
          "id": 1,
          "descricao": "Presencial"
        }
      }

3 respostas

por Maison Galvão

| 1029.1k xp | 1128 posts

Moderador Desenvolvedor de Sistemas

16/01/2020

O que estou querendo fazer é um filtro nesses cursos.nome

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

16/01/2020

Boa noite, Maison! Como vai?

Vc poderia mandar aqui o código que vc tentou fazer? Assim ficará mais fácil de te ajudar.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

por Maison Galvão

| 1029.1k xp | 1128 posts

Moderador Desenvolvedor de Sistemas

17/01/2020

Oi Gabriel eu tentei fazer assim:

<template>
    <div class="">
        <div class="container">
            <h1 class="text-4xl mb-2">Cursos</h1>
            <div class="flex flex-row xs:flex-wrap sm:flex-wrap items-center">
                <input class="w-5/12 xs:w-full text-sm shadow appearance-none border rounded  py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                       id="procurarCurso"
                       type="search"
                       placeholder="Filtrar por Curso"
                       v-on:input="filtro = $event.target.value">
            </div>
        </div>
        <div class="container">
            <div class="flex mt-1">
                <ul class="">
                    <li class="">
                        <input class="" type="checkbox" id="showall" name="show">
                        <label class="xs:text-md" for="showall"> Mostrar todos os cursos </label>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container">
            <div class="flex justify-end mt-4 mb-2">
                <button class="w-1/5 p-2 xs:w-1/3 xs:p-1 sm:w-2/5 md:w-1/4 lg:w-1/4 xl:1/4 md:p-2 lg:p-2 bg-green-500 hover:bg-green-700 text-white font-semibold p-1 rounded"
                        @click="onClickedNovoCurso">
                    Novo Curso
                </button>
            </div>
        </div>

        <hr>

        <div class="mx-auto mt-10 mb-20">
            <Accordion :dadosComFiltro="dadosComFiltro"></Accordion>
        </div>
    </div>

</template>

<script>
    import Accordion from "../../../components/tools/Accordion";

    export default {
        name: "Catálogo",
        components: {
            Accordion
        },
        data() {

            return {
                dados: {},
                copia:[],
                filtro: '',
                cursos: []
            }
        },
        mounted() {
            this.obterEixos();
        },
        computed: {
            dadosComFiltro() {
                if (this.filtro || this.filtro.length <=0) {
                    let exp = new RegExp(this.filtro, 'i');
                     this.copia.forEach(item => {
                        var cursosTmp = item.cursos.filter(curso => exp.test(curso.nome))
                        item.cursos = cursosTmp;
                    })
                    console.log('----- Filtrando...')
                    return this.copia;
                } else {
                    console.log('Não tem nada no input Filtrando...')
                    return this.dados;
                }
            }
        },

        methods: {
            onClickedNovoCurso() {
                this.$router.push({name: 'novo_curso'})
            },
            async obterEixos() {
                try {
                    const res = await this.$store.dispatch("catalogo/getEixosComCursos", 0);
                    this.dados = res.data;
                    console.log(typeof this.dados);
                    console.log(this.dados)
                } catch (e) {
                    console.log(e);
                }
            },
        }


    }
</script>

O Código que não funciona está no computed