JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>

   
</head>
<body>

<div ng-controller="YourController">
    <ul>
        <li ng-repeat="route in ddtechDocumentRouteObject.documentRoutes">
            Assignee: {{ route.assignee.display_value }},
            Due Date: {{ route.due_date.display_value }},
            Status: {{ route.status.display_value }},
            Order: {{ route.order.value }},
            Initials: {{ route.photoInfo.initials }}
        </li>
    </ul>
</div>

</body>
</html>

JavaScript

var app = angular.module('myApp', []);
        app.controller('YourController', function($scope) {
          $scope.ddtechDocumentRouteObject = {
            documentRoutes: [{
                photoInfo: {
                  initials: "JW"
                },
                assignee: {
                  display_value: "John Wayne"
                },
                due_date: {
                  display_value: "2019-01-01"
                },
                status: {
                  display_value: "In Progress"
                },
                order: {
                  value: 1
                }
              },
              {
                photoInfo: {
                  initials: "JW"
                },
                assignee: {
                  display_value: "John Wayne"
                },
                due_date: {
                  display_value: "2019-01-01"
                },
                status: {
                  display_value: "In Progress"
                },
                order: {
                  value: 2
                }
              },
              {
                photoInfo: {
                  initials: "JW"
                },
                assignee: {
                  display_value: "John Wayne"
                },
                due_date: {
                  display_value: "2019-01-01"
                },
                status: {
                  display_value: "In Progress"
                },
                order: {
                  value: 3
                }
              },
              {
                photoInfo: {
                  initials: "JW"
                },
                assignee: {
                  display_value: "John Wayne"
                },
                due_date: {
                  display_value: "2019-01-01"
                },
                status: {
                  display_value: "In Progress"
                },
                order: {
                  value: 4
                }
     ...