How to read this array?

[retorres9]

Hi, I’m new in Ionic and I’m trying to read something like this…

export const PERSONAJES = [
  {
    imagen:'assets/img/han-solo.jpg',
    nombre: 'Han Solo',
    titulo: [
      {titulos:'Cazarrecompensas'},
      {titulos:'capitan'}]
  },

in this html file

<ion-header>
  <ion-navbar color="dark">
    <ion-title text-center>
      {{personaje.nombre}}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding text-center>
  <img [src]="personaje.imagen">
  <h2>{{personaje.nombre}}</h2>
  <div *ngFor="let personaje of personajes">
  <ul>
      <li *ngFor="let titulo of personajes">
          {‌{  titulo.titulos }}
      </li>
  </ul>
</div>

  <button ion-button block color="dark" navPop>
    Regresare
  </button>
</ion-content>

but Iget this error

How I can read that array properly.

[Zodar]

@retorres9

let titulo of personajes

You wouldn’t like “let titulo of personaje” ?

[antony2809]

You have an error on this block

<li *ngFor="let titulo of personajes">
   {‌{  titulo.titulos }}
</li>

The way to read each titulo inside personajes is

<li *ngFor="let titulo of personajes.titulo">
   {‌{  titulo }}
</li>

[retorres9]

now I get this error, help me please

[antony2809]

I can see that your constant PERSONAJES is an array with multiples object

so lets say you want to iterate with *ngFor to show the data in your HTML

Try this and let me know if it work

<div *ngFor="let personaje of personajes">
<img [src]="personaje.imagen">
  <h2>{{personaje.nombre}}</h2>
  <ul>
      <li *ngFor="let titulo of personaje.titulo">
          {‌{  titulo }}
      </li>
  </ul>
</div>

In your code this two tags are outside of the iteration.

<img [src]="personaje.imagen">
<h2>{{personaje.nombre}}</h2>

[YAsh0011]

<div *ngFor="let personaje of PERSONAJES ">
  <ul>
      <li *ngFor="let titulo of personaje.titulo ">
          {‌{ titulo.titulos}}
      </li>
  </ul>
</div>

[retorres9]

Does’t work I get again this error

but my home.html is ok

[antony2809]

You have an error in your home HTML

Looks like you have more than one {{ in the same scope.

Paste the code of you html code of home.html

[retorres9]

Sorry, I’m getting a notification that I’m replying too fast so I have to wait 11 minutes to reply

<ion-header>
  <ion-navbar color="dark">
    <ion-title text-center>
      {{personaje.nombre}}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding text-center>
  <img [src]="personaje.imagen">
  <h2>{{personaje.nombre}}</h2>

  <div *ngFor="let personaje of personajes">
  <img [src]="personaje.imagen">
    <h2>{{personaje.nombre}}</h2>
    <ul>
        <li *ngFor="let titulo of personaje.titulo">
            {‌{  titulo }}
        </li>
    </ul>
  </div>


  <button ion-button block color="dark" navPop>
    Regresar
  </button>
</ion-content>

[YAsh0011]

so you can ty this
in your .ts file

 myArray = [
    {
      imagen:'assets/img/han-solo.jpg',
      nombre: 'Han Solo 1',
      titulo: [
        {titulos:'Cazarrecompensas'},
        {titulos:'capitan'}]
    },
    {
      imagen:'assets/img/han-solo.jpg',
      nombre: 'Han Solo 2',
      titulo: [
        {titulos:'Cazarrecompensas'},
        {titulos:'capitan'}]
    }
  ];

And your html file

<ion-header>
  <ion-navbar>
    <ion-title>
      title
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <div *ngFor="let data of myArray">
      <h2> {{data.nombre}}</h2>
      <ul>
          <li *ngFor="let myData of data.titulo">‌{{myData.titulos}}</li>
      </ul>
    </div>
</ion-content>

[retorres9]

that doesn’t work correctly now there’s no problem but the pages is empty

[YAsh0011]

but its work for me

[retorres9]

If there’s no problem for you can you check my project?
I can send you by email.

[YAsh0011]

ok, i can try to solve this

[retorres9]

I cant’t send you a private message so in this is the link of my project. https://drive.google.com/open?id=0B6cX0D1KXgm1VHpsX3ZNYUhwZm8

[YAsh0011]

put in home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      {{personaje.nombre}}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <img [src]="personaje.imagen">
    <h2>{{personaje.nombre}}</h2>
      <ul>
          <li *ngFor="let titulo of personaje.titulo">‌{{titulo.titulos}}</li>
      </ul>
</ion-content>

[retorres9]

THANK YOU SO MUCH!!! that worked perfectly, but what was the problem?