Building a table from two-dimensional array using ng-repeat in angular

Question

I want to build a table from an array that has this scheme:

var items = [
    {
        name: 'xxx',
        configurations: [
            { 
                image: 'aaa.jpg'
            },
            { 
                image: 'bbb.jpg'
            },
            ...
        ]
    },
    {
        name: 'yyy',
        configurations: [
            { 
                image: 'ccc.jpg'
            },
            { 
                image: 'ddd.jpg'
            },
            ...
        ]
    },
    ...
]

I want to to achive one single row with all images from all elements (every image is nested in one <td>, like:

<tr>
    <td>
        <img src="aaa.jpg">
    </td>
    <td>
        <img src="bbb.jpg">
    </td>
    <td>
        <img src="ccc.jpg">
    </td>
    <td>
        <img src="ddd.jpg">
    </td>
</tr>

How can I do it with angular? My code so far looks like this:

<tr>
    <td ng-repeat-start="proposition in items">
        <img ng-src="{{::proposition.configurations[0].image}}" />
    </td>
    <td ng-repeat-end>
        <img ng-src="{{::proposition.configurations[1].image}}" />
    </td>
</tr>

But obviously a number of configurations in proposition is dynamic, so how can I iterate through it, keeping the same html scheme?

So, if a configuration contains multiple images, do you want these images in the same <td>? — Cerbrus
– Cerbrus, Commented May 3, 2016 at 8:58
@Cerbrus No, I would like every image to be in a separate <td> — krajol
– krajol, Commented May 3, 2016 at 9:02

Ygalbel · Accepted Answer · 2016-05-03 09:27:54Z

1

You have to run two ng-repeat, one for items and one for configuration.

Edit

Simplest way is to flatten your array. So you will have a long array with tuples of <image, name>

You can do that with map:

That's code:

 $scope.items =  [
    {
        name: 'xxx',
        configurations: [
            { 
                image: 'yyy.jpg'
            },
            { 
                image: 'yyy2.jpg'
            }
        ]
    },
    {
        name: 'yyy',
        configurations: [
            { 
                image: 'zzz.jpg'
            },
            { 
                image: 'zzz2.jpg'
            }
        ]
    },
];

  $scope.items = $scope.items.map(function(item){
    return item.configurations.map(function(inner){
        return { name: item.name, image: inner.image};
    })
  })

  $scope.items = $scope.items.concat.apply([], $scope.items);

You have a full working example here.

edited May 3, 2016 at 9:27

answered May 3, 2016 at 8:55

Ygalbel

5,5491 gold badge27 silver badges33 bronze badges

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

2 Comments

krajol Over a year ago

But how exactly should I do it to keep the same structure?

krajol Over a year ago

Well, I was hoping to deal with it just in a view, but I guess that I really need to modify my data in controller which is not perfect, but probably the only way to do it with angular. Apart from some mistakes like you create multiple tr elements (we can move ng-repeat to td) and the fact that it would be better to make a separate function in the controller to flatten the date (so we don't modify the original data), that gives the solution to my problem, thanks!

Collectives™ on Stack Overflow

Building a table from two-dimensional array using ng-repeat in angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related