Cannot Display Object Contents - AngularJS

Question

I am trying to make an app that will display the job details in the modal window, depending on the template that is selected. For this I have combined ui.bootstrap and ui.router . But for some reason, I cannot manage to display the objects as I would want to. I know that $http.get is working, as when I do the console.log(specs), the object is displayed.

This is my code:

HTML

<div class="car-up" ng-controller="carCtrl">
     <script type="text/ng-template" id="careersTpl.html">
        <div class="closer">
            <span class="close-me" ng-click="ok()">X</span>
        </div>
        <div class="modal-body">
            <span>{{placeholder}}</span>
        </div>
        <div class="modal-body modtwo">
            <ul>
                <li><a ui-sref="sales">Sales Department</a></li>
            </ul>
            <ul>
                <li><a ui-sref="webd">Web Developer</a></li>
                <li><a ui-sref="crm">Client Relationship Manager</a></li>
                <li></li>

            </ul>
        <div class="show-me" ui-view></div>
        </div>
     </script> 
     <button class="btn" ng-click="open()">Open</button>
</div>

app.js

var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('webd', {
            url: "/web-developer",
            templateUrl: "templates/web-developer.html",
        })
        .state('crm', {
            url: "/crm",
            templateUrl: "templates/crm-uk.html"
        })
}]);

ctrl.js

app.controller('carCtrl', function($scope, $http, $uibModal) {
    $http.get('jobs.json').then(function(response) {
        $scope.placeholder = response.data.default;
        $scope.specs = response.data.specs;

        $scope.open = function() {

            var modalContent = $uibModal.open({
                templateUrl: 'careersTpl.html',
                controller : 'modalContentCtrl',
                controllerAs: '$ctrl',
                size: 'lg',
                backdropClass: 'backdropOver',
                openedClass: 'modal-opened',
                resolve: { 
                    items: function() { return $scope.specs; },
                    items2: function() { return $scope.placeholder;}
                }
            })
        console.log($scope.placeholder);
        console.log($scope.specs);
        console.log($scope.specs.crm);
        }
    });
});

app.controller('modalContentCtrl', function($scope, $uibModalInstance, items, items2) {
    $scope.specs = items;
    $scope.placeholder = items2;
    $scope.ok = function() {
        $uibModalInstance.close();
    }
});

crm-uk.html

<div ng-repeat="(k, v) in specs.crm">
    <h3>{{v["job-title"]}}</h3>
    <p>{{v["job-body"]}}</p>
    Apply Here:
    <p>{{v["job-apply"]}}</p>
</div>

web-developer.html

<div ng-repeat="(k, v) in specs.web-dev">
    <h3>{{v["job-title"]}}</h3>
    <p>{{v["job-body"]}}</p>
    Apply Here:
    <p>{{v["job-apply"]}}</p>
</div>

JSON

{
   "default":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   "specs":{
      "web-dev":{
         "job-title":"Web Developer",
         "job-body":"Lorem Ipsum Body Text",
         "job-apply":"applink"
      },
      "crm":{
         "job-title":"Client Relationship Manager",
         "job-body":"Lorem Ipsum CRM Text",
         "job-apply":"applylink"
      }
   }
}

I believe something is wrong with my .json file or how I am accessing it, but cannot figure out what.

Can someone please help?

thanks.

Answer 1

First best to change the JSON structure as following:

{
    "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    "specs": {
        "web-dev": [{
            "job-title": "Web Developer",
            "job-body": "Lorem Ipsum Body Text",
            "job-apply": "applink"
        }],
        "crm": [{
            "job-title": "Client Relationship Manager",
            "job-body": "Lorem Ipsum CRM Text",
            "job-apply": "applylink"
        }]
    }
}

Make the "crm" as a list of multiples. Then in the view file, you can loop the "crm" specs list.

<div ng-repeat="item in specs.crm">
    {{item['job-title']}}<br/>
    {{item['job-body']}}<br/>
    {{item['job-apply']}}<br/>
</div>

Or use {{::item['job-title']}} for single data binding to limit digest cycles

Working Plunkr here Please note only updated for 'CRM'