Trying to create an image in dashboard based on API response?

[Provello]

Hey all. I'm creating a dashboard to use in work that displays how many orders we have, how many are picked and how many are packed. But we've ran in to an issue (we sell unique items, not multiples of one) so we need to be able to see the item to make sure that we've picked the right item

I've been able to get it to work that it shows me the latest one that the API sends, but not a "for each" with a template.

Flow

Output

As you can see there are 2 orders with images to pull in, but it just over-writes the current images with the latest pulled

Hope you can help

[Provello]

Set up a few test products and managed to find a fix.

For those interested in how I did it.

I decided the join the output of the http request to create an array

Then discovered ng-repeat and used it to go through the array and display the values on the dashboard

<div class="row">
    <div ng-repeat = "payload in msg.payload">
        <div class="column">
            <img src="{{payload.images[0].src}}" style="width:100%;">
        </div>
    </div>
</div>

Just in case anyone else wanted to be able to display something that could be variable on the dashboard. This can also be used to do things like tables etc

With a bit of styling

<style>
    .column {
  float: left;
  width: 33%;
  padding: 0;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>

It gives me this output (There are some broken orders IE: Didn't have the products uploaded before the orders happened but should work moving forward and this will self resolve for any future orders (all images are same size too)