Angular ng-Repeat on Table

Question

I refuse to believe that this is the only way to get what I want. If so this defeats the ease of the ng-repeat. I am pulling from a JSON string and I want to build a simple table. Here is what I have and it works, but I don't think its the proper way. I have tried {{e.POST_TITLE}} and no luck. How should I be doing this?

<table class="table table-striped table-bordered">
<thead>
<th><input type="text" class="" value="" placeholder="Tag Name"></th>
<th></th>
</thead>

<tbody>
<tr ng-repeat="e in Posts">
<td>{{Posts.POST_TITLE[$index]}} </td>
<td>{{Posts.TAGS[$index]}}</td>

</tr>



</tbody>


</table>

Here is a sample of the JSON:

enter image description here

I'd say this is more an issue with your JSON data than with ng-repeat. I would expect the json POSTS to be an array of POST objects, where each post object has body, date, tags etc. You could convert the json in the aforementioned format if you really need to. — Narretz
– Narretz, Commented Jul 1, 2013 at 15:55
I just tried the approach that you have taken and I find that it does work... Could you elaborate on the error that you get? — callmekatootie
– callmekatootie, Commented Jul 1, 2013 at 16:14
Yea I had a default param in coldfusion that would return the results in a column format. Fixed it to an array format — jwimmer
– jwimmer, Commented Jul 1, 2013 at 17:13

callmekatootie · Accepted Answer · 2013-07-01 16:13:25Z

Your model is incorrect. What you have are multiple arrays and each element of the array at the same array index are related to each other - that is they need to be logically grouped and there need to be 22 Arrays of each record, not 22 Arrays of each column, if that makes sense.

You have two choices:

Choice 1
Correct your model. Using an example here, this is how your model looks like currently:

Item = ["Item1", "Item2", "Item3];
Fruit = ["Apple", "Orange", "Watermelon"];

Instead, your model should look like:

Records = [
    {
        Item: "Item1",
        Fruit: "Apple"
    },
    {
        Item: "Item2",
        Fruit: "Orange"
    },
    {
        Item: "Item3",
        Fruit: "Watermelon"
    }
];

Choice 2
What you have been doing. That is not recommended since your model can be improved with Choice 1 but if you still wish to go ahead, then you can indeed proceed with the code that you have written. It does work - the issue could be that you have forgotten to JSON.parse() the data that is returned.

Collectives™ on Stack Overflow

Angular ng-Repeat on Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related