Template node with ng-repeat won't show array items

[clickworkorange]

I've been struggling with something which should be very simple; a button that sends a 1-dimensional array to a template node, which shows the array values:

The button sends ["OH NO!","Hello World!","Hello World!","Hello World!","OH NO!"], which shows up in debug as an array with five items:

The template node contains:

<table>
    <tr ng-repeat="value in msg.payload">
        <td>{{value}}</td>
    </tr>
</table>

But nothing appears - and I've double checked in the HTML inspector that there are no hidden elements. No errors, nothing. But if I change the button payload to ["one","two","three"] it works every time. Driving me nuts it is - what am I missing here!?

ng-repeat-mystery.json (1.7 KB)

[clickworkorange]

Ok, it's the repetition. The array cannot contain the same value twice. ["a","a","a"] fails silently, ["a","b","c"] works. Why is this?

Edit: Error: ngRepeat:dupes - Duplicate Key in Repeater

Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.

Wow. Funny how I've never run into this before - I've been tinkering w. Node-RED on & off for years. A somewhat surprising feature of Angular.JS which probably should be mentioned in any ng-repeat tuts & boilerplate. Might save someone else the headache. The solution (if your array may contain duplicate values) is to tell Angular to generate DOM references by index instead:

<table>
    <tr ng-repeat="value in msg.payload track by $index">
        <td>{{value}}</td>
    </tr>
</table>

Edit 2: And of course all this can be seen in the JS error console, plain as day - the error message even includes a link to the article on Angular's website... Doh!