Cargue json desde un archivo local con http.get () en angular 2

Si encuentras alguna parte que te causa duda puedes dejarlo en los comentarios y haremos todo lo necesario de ayudarte lo más rápido posible.

Solución:

Para Angular 5+ solo pasos de preforma 1 y 4

---

Para acceder a su archivo localmente en Angular 2+ debes hacer lo siguiente (4 pasos):

[1] Dentro de su carpeta de activos, cree un .json archivo, ejemplo: datos.json

[2] Ir a tu angular.cli.json (angular.json en Angular 6+) dentro de su proyecto y dentro del activos array poner otro objeto (después del paquete.json objeto) así:

“glob”: “datos.json”, “entrada”: “./”, “salida”: “./activos/”

ejemplo completo de angular.cli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
         "glob": "package.json", "input": "../", "output": "./assets/" ,
         "glob": "data.json", "input": "./", "output": "./assets/" 
      ],

Recordar, datos.json es solo el archivo de ejemplo que agregamos previamente en la carpeta de activos (puedes nombrar tu archivo como quieras)

[3] Intente acceder a su archivo a través de localhost. Debería estar visible dentro de esta dirección, http://localhost:your_port/assets/data.json

Si es no visible entonces has hecho algo incorrectamente. Asegúrese de poder acceder a él escribiéndolo en el campo URL de su navegador antes de continuar con el paso 4.

[4] Ahora realice una solicitud GET para recuperar su .json archivo (tienes tu ruta completa .json URL y debe ser simple)

 constructor(private http: HttpClient) 
        // Make the HTTP request:
        this.http.get('http://localhost:port/assets/data.json')
                 .subscribe(data => console.log(data));

Tienes que cambiar

loadNavItems() 
        this.navItems = this.http.get("../data/navItems.json");
        console.log(this.navItems);
    

por

loadNavItems() 
        this.navItems = this.http.get("../data/navItems.json")
                        .map(res => res.json())
                        .do(data => console.log(data));
                        //This is optional, you can remove the last line 
                        // if you don't want to log loaded json in 
                        // console.
    

Porque this.http.get devuelve un Observable y no quieres la respuesta, quieres su contenido.

los console.log muestra un observable, lo cual es correcto porque navItems contiene un Observable.

Para obtener datos correctamente en su plantilla, debe usar async tubo.

Esto debería funcionar bien, para obtener más información, consulte la documentación del cliente HTTP

MI PROPIA SOLUCIÓN

Creé un nuevo component llamado test en esta carpeta:

También creé un simulacro llamado test.json en el assests carpeta creada por angular cli (importante):

Este simulacro se ve así:

[
        
            "id": 1,
            "name": "Item 1"
        ,
        
            "id": 2,
            "name": "Item 2"
        ,
        
            "id": 3,
            "name": "Item 3"
        
]

En el controlador de mi componente testimport seguir rxjs Me gusta esto

import 'rxjs/add/operator/map'

Esto es importante, porque tienes que map tu response desde el http get llama, para que obtengas un json y puede enlazarlo en su ngFor. Aquí está mi código de cómo cargo los datos simulados. solía httpget y llamó mi camino al simulacro con este camino this.http.get("/assets/mock/test/test.json"). Después de esto yo map la respuesta y subscribe eso. Luego lo asigno a mi variable. items y bucle con ngFor en mi template. También exporto el tipo. Aquí está todo el código de mi controlador:

import  Component, OnInit  from "@angular/core";
import  Http, Response  from "@angular/http";
import 'rxjs/add/operator/map'

export type Item =  id: number, name: string ;

@Component(
  selector: "test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.scss"]
)
export class TestComponent implements OnInit 
  items: Array;

  constructor(private http: Http) 

  ngOnInit() 
    this.http
      .get("/assets/mock/test/test.json")
      .map(data => data.json() as Array)
      .subscribe(data => 
        this.items = data;
        console.log(data);
      );
  

Y mi bucle en él es template:

  item.name

¡Funciona como se esperaba! Ahora puedo agregar más archivos simulados en la carpeta de activos y simplemente cambiar la ruta para obtenerlo como json. Tenga en cuenta que también tiene que importar el HTTP y Response en su controlador. Lo mismo en tu app.module.ts (principal) así:

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  HttpModule, JsonpModule  from '@angular/http';


import  AppComponent  from './app.component';
import  TestComponent  from './components/molecules/test/test.component';


@NgModule(
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

Te mostramos comentarios y calificaciones

Recuerda algo, que tienes la opción de añadir una tasación acertada .

---

---

Utiliza Nuestro Buscador