Angularjs how to display object correctly

Question

I'm having trouble displaying my location object. I'm displaying it but it's throwing the whole array and I'm kind of stuck at this part.

My problem is how to remove the [] bracket.

location json

[
{
    "_id": "5a61acfdd5df1761dd2eb1ef",
    "branch": "Lucena City",
    "__v": 0,
    "building": [
        {
            "name": "mhq",
            "floors": [
                "1st",
                "2nd",
                "3rd"
            ]
        }
    ],
    "dateCreated": "2018-01-19T08:31:57.121Z"
}

]

HTML

<table class="table table-sm">
<thead>
    <tr>
        <th>Branch</th>
        <th>Building</th>
        <th>Floors</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="loc in vm.locations">
        <td>{{ loc.branch }}</td>
        <td>{{ loc.building[0].name }}</td>
        <td>
            {{ loc.building[0].floors }}
        </td>
    </tr>
</tbody>
</table>

charlietfl · Accepted Answer · 2018-01-23 00:54:22Z

1

You could use Array#join()

 {{ loc.building[0].floors.join(', ') }}

answered Jan 23, 2018 at 0:54

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Ele · Accepted Answer · 2018-01-23 00:54:52Z

1

You just need to call the join function

loc.building[0].floors.join(",");

Hope it helps!

answered Jan 23, 2018 at 0:54

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Comments

Arun Gopinathan · Accepted Answer · 2018-01-23 01:29:56Z

1

The answers above are right.

You can also create a filter say to_csv_string that takes an array and returns a comma separated string, then you can pipe the result as

{{ loc.building[0].floors| to_csv_string }}. Now you could reuse it wherever its required

I have a demo plunker, you can have a look if you like.

https://plnkr.co/edit/yFJXEiIW3fmL4A7L7kt7?p=preview

answered Jan 23, 2018 at 1:29

Arun Gopinathan

3884 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angularjs how to display object correctly

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related