Proyecto de angular con datos de fichero JSON

Posted on 22 febrero, 2023 by nadiaprd

Cuando decides introducirte en el mundo de angular, para aprender su desarrollo, necesitarás contenido para realizar las pruebas. Un ejemplo para adquirir un contenido rápido es desde un fichero JSON y en este tutorial vamos a aprender como ver la información de un archivo JSON en tu proyecto de angular.

1º Paso – Angular en tu entorno local:
Para poder llevar a cabo el desarrollo del proyecto necesita tener instalado node.js y el CLI de angular. Si ya lo tienes instalado en tu equipo asegúrate de tenerlo todo actualizado.

Para instalar node accede al sitio de NodeJS y descargar la ultima versión descarga de NodeJS. Después con este comando y desde el terminal de tu equipo veremos que versión hemos obtenido

node -v

Después toca actualizar npm utilizando el siguiente comando y comprobar esa actualización:

npm install npm -g  //comando de actualización
npm -v  //comprogar la versión de ahora

Una vez que tenemos instalado o actualizado node es el paso de angular CLI y para instalarlo es necesario ejecutar este comando que nos traerá la última versión que está activa en uso.

npm install -g @angular/cli@latest

2 º Paso – Comando para ejecutar la orden de crear proyecto nuevo:

Desde el terminal sitúate en la carpeta que deseas crear el proyecto y lanza el siguiente comando . Te preguntará si quieres aplicar el enrutamiento en angular y que formato de hoja de estilo te gustaría usar css, Scss, Sass, Less. Para lleva a cabo este ejemplo vamos a marcar que sí al enrutamiento y Sass como formato de hoja de estilos. Después lanzaremos el proyecto.

ng new nombre-del-proyecto  //comando para crear el proyecto
ng serve   //lanzar el proyecto o
ng serve --port 4245   //lanzar el proyecto en el siguiente puerto

3º Paso – Crear componente para pintar datos y fichero JSON:

Para crear un componente en angular se usa el siguiente comando y angular importará ese componente por nosotros en el fichero app.module.ts. Si no lo ha importado también te dejo aquí como incluirlo.

ng generate component nombre-componente  // comando para crear el componente

//fichero:  app.module.ts

import { NavbarComponent } from './navbar/navbar.component'; //importar componente

Ahora vamos a crear el fichero JSON que traerá nuestros datos. Yo he creado una carpeta llamada json dentro del proyecto, dentro de la carpeta app (app/json/datos.json). También dejo por aquí un ejemplo del fichero.

//datos.json
[{
    "id": 1,
    "name": "Empresa",
    "icono": "fa-building",
    "class": "empresa",
    "child": [{
      "id": 1,
      "name": "¿Qué hacemos?",
      "url": ""
    },
    {
      "id": 2,
      "name": "Nuestros clientes",
      "url": ""
    }]
  },
  {
    "id": 2,
    "name": "Servicios",
    "icono": "fa-cogs",
    "class": "servicios"
  },
  {
    "id": 3,
    "name": "Contacto",
    "icono": "fa-envelope",
    "class": "contacto"
  }

]

Ahora vamos a llamar al fichero JSON desde el componente donde queremos pintarlo. En mi caso cree un componente llamado navbar y un archivo con datos de ese menú a pintar. Por lo tanto en el componente navbar es donde importaré mi fichero json.

//component: navbar.component.ts

import navbar from '../json/navbar.json';

Después de importarlo aplicaremos los parámetro necesarios en el fichero «tsconfig.json» de tu proyecto para poder leer los archivos en formato JSON. Insertaremos los siguiente parámetro dentro del las opciones del compilador. A continuación pararemos el proyecto y volveremos a ejecutarlo.

"compilerOptions": {
    "resolveJsonModule": true,     //parámetro a insertar
    "allowSyntheticDefaultImports": true,  //parámetro a insertar

4º Paso – Trabajar los datos del archivo JSON:

Como hemos importado el fichero en nuestro componente ya podemos trabajar con él y crearemos una variable array para trabajar la información. Finalmente recorreremos el array desde el fichero.html de dicho compomente.

//component: navbar.component.ts

import { Component } from '@angular/core';
import navbar from '../json/navbar.json';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.sass']
})

export class NavbarComponent {
  
  menus : any;

  constructor(){
    this.menus = navbar;
    console.log(this.menus);
  }
}

//component: navbar.component.html

<ul>
    <li *ngFor="let menu of menus">{{menu.name}}
      <ul *ngIf="menu.child"> 
        <li *ngFor="let child of menu.child">{{child.name}}</li>
        </ul> 
    </li>
</ul>

Con este último paso ya hemos logrado trabajar los datos del fichero JSON. Espero que este tutorial os sirva de ayuda para trabajar información de pruebas en vuestro aprendizaje con angular.