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

Question

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 · Accepted Answer · 2017-09-02 10:32:52Z

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>

Yes. thanks for the help. But I want to get also another field. Right now i am bale to get. But Field is date like 2017-10-01T02:00:00.000Z. I want to convert into. YYYY-DD-MM@ HH:MM. could we convert with your approach?
Yes I am using moment js. But I am new in this. Could you send me syntax with your code

masterpreenz · Accepted Answer · 2017-09-02 10:34:43Z

0

What you have looped in the template is wrong:

You should loop the fsus values then display ReasonCode:

// Put fsus in $scope
$scope.fsus = res.fsus;

Then in your template:

<li ng-repeat="statusMessageType in fsus">
  <span class="step">
    {{statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}}
  </span> 
</li>

hope that helps.

edited Sep 2, 2017 at 10:34

answered Sep 2, 2017 at 10:20

masterpreenz

2,2881 gold badge14 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Linked

Related