Angular binding data array of object

Question

how to binding this data

    export const CEK: Cek[] = [
  {
    id : 1,
    name : 'one',
    arr : [{lat : 123, long:3212}]
  },
  {
    id : 2,
    name : 'two',
    arr : [{lat : 123, long:3212}]
  },
];

i have try binding data like this

<tr *ngFor="let data of datacek">
        <td> {{data.id}} </td>
        <td> {{data.name}}</td>
        <td> {{data.arr[lat]}} {{data.arr[long]}} </td>
    </tr>

^ data.arr[lat] or data.arr[lat] is not showing anything

or i have try this way

<tr *ngFor="let data of datacek">
        <td> {{data.id}} </td>
        <td> {{data.name}}</td>
        <td> {{data.arr}}</td>
    </tr>

and the result only showing [object Object]

any idea how to binding my case of data ?

What is datacek?

Günter Zöchbauer
– Günter Zöchbauer

2018-01-09 10:13:31 +00:00
Commented Jan 9, 2018 at 10:13 — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 9, 2018 at 10:13
yes i think it shoudl be Cek!

Hrishikesh Kale
– Hrishikesh Kale

2018-01-09 10:14:11 +00:00
Commented Jan 9, 2018 at 10:14 — Hrishikesh Kale
– Hrishikesh Kale, Commented Jan 9, 2018 at 10:14

Ashraful Islam · Accepted Answer · 2018-01-09 10:21:44Z

3

Use arr property as object then it will work with your existing templating.

export const CEK: Cek[] = [
  {
    id : 1,
    name : 'one',
    arr : {lat : 123, long:3212}
  },
  {
    id : 2,
    name : 'two',
    arr : {lat : 123, long:3212}
  },
];

Otherwise use index for arr array

<td> {{data.arr[0].lat}} {{data.arr[0].long}} </td>

You declared the property as array and using it like an object. This is the problem.

answered Jan 9, 2018 at 10:21

Ashraful Islam

1,26311 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashraful Islam Over a year ago

Please accept the answer if it works @ShaugiMuhammad

Vu Quyet · Accepted Answer · 2018-01-09 10:25:53Z

1

it should be:

<td> {{data.arr[0].lat}} {{data.arr[0].long}} </td>

edited Jan 9, 2018 at 10:25

answered Jan 9, 2018 at 10:15

Vu Quyet

1,7051 gold badge16 silver badges22 bronze badges

Comments

Dhyey · Accepted Answer · 2018-01-09 10:30:00Z

1

Use following code:

<tr *ngFor="let data of datacek">
    <td> {{data.id}} </td>
    <td> {{data.name}}</td>
    <td> {{data.arr[0].lat}} {{data.arr[0].long}} </td>
</tr>

Let me know is it solved your issue.

edited Jan 9, 2018 at 10:30

Dhyey

4,3453 gold badges28 silver badges34 bronze badges

answered Jan 9, 2018 at 10:17

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular binding data array of object

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related