Array key value get in html from controller in angular js?

Martin Published at Dev

Martin

I am getting array of key in angular js controller. And I am able to get particular value in controller. But I am not able to get in view(HTML).

Controller:

var statusLength= res.fsus.length;  
for(var i=0; i<statusLength; i++)
{    
       $scope.opts=res.fsus[i].statusMessageType.MasterConsignment.ReportedStatus.ReasonCode

}

In this loop I am able to get particular value. I want to display these value in View(HTML) part. I am new in angular js. I am not sure I am doing right or not.

Value is In Loop

var
car
ban

But when I tried to get in UI(HTML) then It will displaying only v a r. Not displaying var car ban. It is displaying only v a r

HTML

<li ng-repeat=" opt in opts">
       <span class="step">{{opt}}</span> 
</li>

JSON

fsus[{
  statusMessageType:{
       MasterConsignment:{
           ReportedStatus:{
             ReasonCode:"var"
             }
           }
       },
    statusMessageType:{
       MasterConsignment:{
           ReportedStatus:{
             ReasonCode:"car"
             }
           }
       },
   statusMessageType:{
       MasterConsignment:{
           ReportedStatus:{
             ReasonCode:"ban"
             }
           }
       },
}]

please share your idea. thanks

Sajeetharan

First of all your JSON is not a valid one, change it as,

[ { "statusMessageType": { "MasterConsignment": { "ReportedStatus": { "ReasonCode": "var" } } } }, { "statusMessageType": { "MasterConsignment": { "ReportedStatus": { "ReasonCode": "car" } } } }, { "statusMessageType": { "MasterConsignment": { "ReportedStatus": { "ReasonCode": "ban" } } } } ]

You can use ng-repeat with track by $index to display the options

<li ng-repeat="test in res.fsus track by $index">
      <span class="step">    {{test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}}
      </span> 
</li>

DEMO

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.res ={};
   $scope.res.fsus = [
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "var"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "ban"
        }
      }
    }
  }
];
 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<li ng-repeat="test in res.fsus track by $index">
  <span class="step">    {{test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}}
  </span> 
</li>
</body>

Collected from the Internet

Please contact [email protected] to delete if infringement.