0

estoy comenzandon con Angular. tengo un servicio el cual se conecta a una API y me devuelve un Json. el json viene como un vector de objetos y lo que quiero hacer es poder devolver un vector en el que pueda iterar normalmente escribiendo vector[i].nombre desde el .html de la componente donde importo dicho servicio ya que actualmente puedo acceder al vector es haciendo vector[i][i].nombre como puedo hacerlo? hasta ahora lo que tengo es lo siguiente pero me da error.

este es el servicio:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Inmueble } from '../modelos/inmueble';

@Injectable({
  providedIn: 'root'
})
export class HostlistService {
  inmuebles: Inmueble[];
  vector: any[];

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'text/html',
      'Access-Control-Allow-Origin' : '*',
      'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, HEAD, OPTIONS'
    })
  }


  constructor(public http: HttpClient) {

  }


  getInmuebles():Inmueble[]{
    this.http.get('URL',this.httpOptions).subscribe(
      result => {
        this.vector = Object.values(result)
        this.vector[1][1].nomb_prod_c;
        this.inmuebles[0].nombre = this.vector[1][1].nomb_prod_c;
        for (let i=0; i<=3; i++){
          //this.inmuebles[i].nombre=this.vector[1][i].nomb_prod_c;
          //console.log(this.inmuebles[0].nombre);
          //console.log(this.vector[1][i].nomb_prod_c);
          console.log(this.inmuebles[0]);
        }

        }
      );
      return this.inmuebles;
  }

}

esta es la interfaz donde defino el tipo inmueble:

export interface Inmueble {
  nombre: string;
  id: string;
  estacionamiento: number;
  baño: number;
  foto1: string;
  foto2: string;
  foto3: string;
  foto4: string;
  foto5: string;
  precio: number;
}

aqui esta la componente donde lo llamo y en el .html de esta componente es donde quisiera mostrar los datos del vector:

import { Component, OnInit } from '@angular/core';
import { HostlistService } from '../servicios/hostlist.service';
import {$,jQuery} from 'jquery';
import { Inmueble } from '../modelos/inmueble';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {
  inmuebles: any[];
  i = 1;
  url: string = "d782a4ae-733f-b7c4-ed11-5ba553455e04_fot01_c";

  constructor(private hostlistService: HostlistService) { }
  ngOnInit() {

    //console.log(this.url);
    this.inmuebles=this.hostlistService.getInmuebles();
    //console.log(this.inmuebles[0].nombre);
  }

  anteriorInmueble(){
    this.i=this.i-1;
  }

  siguienteInmueble(){
    this.i=this.i+1;
  }

}

Y este es el error que me esta mostrando en consola:

ERROR TypeError: "_this.inmuebles is undefined"
    getInmuebles hostlist.service.ts:31
    RxJS 11
    Angular 8
core.js:15724
    Angular 4
    RxJS 5
    Angular 11

Aqui estan unas fotos reales del archivo Json:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

2
  • Fijate si podes poner el json tal cual como lo recibis. No hay llaves ni corchetes en lo que agregaste.
    – Juan
    el 31 may. 2019 a las 19:59
  • @Juan ya lo edite amigo. puedes verlo. es un vector de objetos.
    – JulianProg
    el 1 jun. 2019 a las 2:45

1 respuesta 1

0

El error puntual del undefined es porque solo declaraste el vector pero no está inicializado:

// declaración
inmuebles: Inmueble[];

// inicialización vacía.
inmuebles = [];

// o todo en un paso
inmuebles: Inmueble[] = [];

Las cabeceras de Access control están de más. Las que estás usando las tiene que mandar el server como respuesta a pedidos de autorización que envía el navegador del usuario.

'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, HEAD, OPTIONS'

Y lo que estás haciendo es un GET. El GET no lleva un body por lo tanto no tiene un "Content". Por lo que tampoco tiene sentido enviar la cabecera de "Content-type".

El Servicio idealmente no debería procesar los datos, sino que sea el componente el que los procesa. Si se hiciera así, el servicio devolvería el Observable al compoente.

getInmuebles():Inmueble[]{
    return this.http.get<any>('URL',this.httpOptions);

Y el componente:

result debe contener la estructura del json ya como objeto, por lo que podés iterar el array de inmuebles directamente.

inmuebles: Inmueble[] = []; // Movíendolo del servicio a al componente
this.hostlistService.getInmuebles().subscribe(
    result => {
        if(result.success === true){
            for(const item of result.data) {
                const inmueble = new Inmueble();
                inmueble.nombre = item.nomb_prod_c;
                // resto de asignaciones.
                inmuebles.push(inmueble);
            }
        }
    },
    error => {
        console.log(error);
    }
);

1ra EDICIÓN

ERROR in src/app/modelos/inmueble.ts(2,18): error TS1246: An interface property cannot have an initializer. src/app/modelos/inmueble.ts(3,14): error TS1246

En lugar de interface usar un class para poder instanciar objetos con estos atributos.

export class Inmueble {
  nombre: string;
  id: string;
  estacionamiento: number;
  baño: number;
  foto1: string;
  foto2: string;
  foto3: string;
  foto4: string;
  foto5: string;
  precio: number;
}
8
  • amigo me muestra estos errores: ERROR in src/app/modelos/inmueble.ts(2,18): error TS1246: An interface property cannot have an initializer. src/app/modelos/inmueble.ts(3,14): error TS1246: An interface property cannot have an initializer. src/app/slider/slider.component.ts(20,23): error TS2339: Property 'success' does not exist on type 'Object'. src/app/slider/slider.component.ts(21,42): error TS2339: Property 'data' does not exist on type 'Object'. src/app/slider/slider.component.ts(23,42): error TS2693: 'Inmueble' only refers to a type, but is being used as a value here.
    – JulianProg
    el 1 jun. 2019 a las 5:01
  • De todos esos errores el que mas me preocupa es el que dice: error TS2693: 'Inmueble' only refers to a type, but is being used as a value here , y en la consola del navegador me muestra: ERROR ReferenceError: "Inmueble is not defined" . De todos los errores esos son los que mas me preocupan porque detienen la ejecucion, ya que coloque un console.log antes de "const inmueble = new Inmueble();" y si se muestra, pero luego de eso se echa a perder todo. intente incializar el objeto pero no funcionó, sabras que pueda estar sucediendo?
    – JulianProg
    el 1 jun. 2019 a las 5:04
  • Inmueble está declarado como interface y en mi respuesta lo usé como una clase. Las alternativas son o redefinrlo como clase (ver 1ra edición en la respuesta), o dejarlo como interface pero cambiarle los atributos al inmueble para matchear lo que viene en el json y después asignar los objetos recibidos a variables de este tipo (hay que cambiar lo que está dentro del for - of).
    – Juan
    el 1 jun. 2019 a las 13:56
  • Oye amigo, muchas gracias por tu ayuda, me servió de mucho. Aunque sigo teniendo problemas. si ejecuto el codigo por primera vez me muestra estos errores: ERROR in src/app/slider/slider.component.ts(21,23): error TS2339: Property 'success' does not exist on type 'Object'. alguna idea xq pasa eso? pero si lo modifico por result [0] y reuslt[1] como las posiciones de success y data respectivamente el codigo si se ejecuta, pero cuando los mando a imprimir dice "undined" y no me muestra los datos en el .html. una vez ejecutado si coloco result.success y result.data si se ejecuta.
    – JulianProg
    el 1 jun. 2019 a las 22:48
  • agregue fotos reales del Json.
    – JulianProg
    el 1 jun. 2019 a las 22:59

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.