How to read this array?


#1

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.


#2

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


#3

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>

#4

now I get this error, help me please


#5

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>

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

#7

Does’t work I get again this error


but my home.html is ok


#8

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


#9

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>

#10

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>



#11

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


#12


but its work for me


#13

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


#14

ok, i can try to solve this


#15

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


#16

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>


#17

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