Capture an attribute of a JSON in Angular2 - TypeScript

Question

Capture an attribute of a JSON in Angular2 - TypeScript

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I have a JSON that is sent to me as an external service from this url. link I capture these data in my angle as follows: I define my file named Base64.ts that defines the shape of my data

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

I capture the data sent from the URL in my 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')
  }
}

I define the following in my about.component.ts:

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;
    })
  }

up to this point everything normal. if I did a

console.log(this.bases);

would have the following correct result:

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

THE PROBLEM COMES HERE: I can not access a specific attribute of this data collection. (I want to get the content of "title" and save it in a variable)

I've tried with:

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

resulting in console undefined , also probe with:

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

This time I see an error in the command console of Angular

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

Thanks in advance

json typescript angular angular6 rest

asked by Remso Rojas Guevara 17.10.2018 в 19:05

source

2 answers

0

RESOLVED: In the service about.services.ts remove the: Base64 [] from It was no longer necessary to use my file Base64.ts

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

Finally in about.componet.ts the following was defined:

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 an HTML to use a button that performs the function download

<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>

answered by 17.10.2018 в 21:25

Add items in two lists at the same time Comparator does not work! =

score 1 · Accepted Answer

1

Use the JSON.parse () before displaying by console since from a web server you receive a string and so you can make a console.log (for example) you have to use a Javascript object.

answered by 17.10.2018 / 19:25

source