2

Tengo un JSON que se me envia como servicio externo desde esta url. https://jsonplaceholder.typicode.com/todos/1 Estos datos los capturo en mi angular de la siguiente manera: Defino mi archivo de nombre Base64.ts que define la forma de mis datos

    export interface Base64{
    "userId":number;
    "nombre":string;
    "title":string;
    "completed": boolean;
}

capturo los datos enviados desde la URL en mi about.services.ts

import { Base64 } from "./Base64";
@Injectable({
  providedIn: 'root'
})
export class AboutService {

  constructor( private httpCliente:HttpClient) { 

    console.log('servicee esta trabajando');
  } 
  getData2(){
    return this.httpCliente.get<Base64[]>('https://jsonplaceholder.typicode.com/todos/1')
  }
}

Defino en mi about.component.ts lo siguiente:

import { Component } from '@angular/core';
import { AboutService } from '../about.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent  {

  bases =[];
  constructor( private data:AboutService){
    this.data.getData2().subscribe(dato =>{
      this.bases=dato;
    })
  }

hasta este punto todo normal. si hiciera un

console.log(this.bases);

tendria el siguiente resultado correcto:

{userId: 1, id: 1, title: "delectus aut autem", completed: false}

EL PROBLEMA VIENE AQUI : No puedo acceder a un atributo especifico de esta coleccion de datos. (Quiero obtener el conteniedo de "title" y guardarlo en una variable)

he probado con :

console.log(this.bases[2]);

resultandome en consola undefined, tambien probe con:

var variable1 = this.bases.title;
     console.log(variable1);

esta ves me aparece un error en la consola de comandos de Angular

ERROR in src/app/home/home.component.ts(21,33): error TS2339: Property 'title' does not exist on type 'any[]'

Gracias de antemano

4
  • importe mi archivo de Base64 a mi actual ts para poder usar esto pero me sigue marcando los mismos errores. (undefined y 'title' does not exist on type 'Base64[]) console.log(this.bases.title); @JackNavaRow Commented el 17 oct. 2018 a las 17:22
  • donde tienes definido this.bases ?? Commented el 17 oct. 2018 a las 17:57
  • lo tengo en about.componet.ts bases =[]; constructor( private data:AboutService){ this.data.getData2().subscribe(dato =>{ this.bases=dato; console.log(this.bases); Commented el 17 oct. 2018 a las 20:21
  • lo unico que debes hacer es decir que base es de tipo array About y debe ser algo como base : Array<Base64>{} = [] Commented el 17 oct. 2018 a las 20:28

2 respuestas 2

1

Utiliza el JSON.parse() antes de mostrar por consola ya que desde un servidor web tu recibes una cadena y para que puedas hacer un console.log (por ejemplo) tienes que usar un objeto de Javascript.

0

RESUELTO: En el servicio about.services.ts quite el : Base64[] de Ya no fue necesario usar mi archivo Base64.ts

  getData2(){
    return this.httpCliente.get('https://jsonplaceholder.typicode.com/todos/1')
  }

finalmente en el about.componet.ts se definio lo siguiente:

import { Component } from '@angular/core';
import { AboutService } from '../about.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent  {

  json ="";
  constructor( private data:AboutService){
    this.data.getData2().subscribe(dato =>{
      this.json=JSON.stringify(dato);
   /*    console.log(this.json); */
    })
  }

  descargar(){
    var data = JSON.parse(this.json);
    /* console.log(data); */
    console.log(data.title);
    }
}

use un HTML para usar un boton que realize la funcion descargar

<div class="card-body">
      <h5 class="card-title">capturando excel desde json</h5>
      <p class="card-text">PARA DESCARGAR HAZ CLICK EN EL BOTON</p>
      <button class="btn btn-success" (click)="descargar()">Descargar</button>
    </div>
2
  • si bien te funciono no estas usando las bondades de typescript Commented el 17 oct. 2018 a las 19:43
  • @JackNavaRow como podria mejorarlo. usando completamente Typescript Commented el 17 oct. 2018 a las 20:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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