Display radio button data from array value in scope angular

Question

I have web service call. I am getting response from webservice like this :

var SSOUserResponse = [
                  {
                      "UserName": "se",
                      "FirstAndLastName": "Sam ",
                      "EmailAddress": "[email protected]"
                  },
                  {
                      "UserName": "se2",
                      "FirstAndLastName": "Joe ", //
                      "EmailAddress": "[email protected]" //
                  }
                ];

or

SSOUserResponse array length can me more also.

$scope.launchArray = [];

I want to display this data in my templete.

What I am doing :

if (SSOUserResponse.length > 1) {
                    var launchArrayVal = [];
                    for (var i = 0; i < SSOUserResponse.length;i++){
                        launchArrayVal.push(
                          { name: SSOUserResponse[i].UserName, email: SSOUserResponse[i].EmailAddress }
                        );
                        $scope.launchArray = launchArrayVal;
                    }
}

I have a templete :

<div class="modal-body">
                <div>Please select an one data</div>
                <div>
                    <input type="radio" ng-model="launchArray" name="group1" value="{{launchArray.name}}">
                </div>
            </div>

I want to display radio button with with username and email to display.. I tried ng-repeat also. It is not working.

Can u guide me what I doing wrong or what I can do?

dhavalcengg · Accepted Answer · 2015-01-27 07:28:55Z

2

Checkout this

<div class="modal-body">
        <div>Please select an one data</div>
        <div ng-repeat = 'item in launchArray'>
            <input type="radio" ng-model="selected.value" name="group" ng-value="item.name">
            <div> Name : {{item.name}}</div>
            <div> Email : {{item.email}}</div>
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <div >
      <b>Selected Value :: </b>{{selected.value}}
    </div>



  var SSOUserResponse = [
                  {
                      "UserName": "se",
                      "FirstAndLastName": "Sam ",
                      "EmailAddress": "[email protected]"
                  },
                  {
                      "UserName": "se2",
                      "FirstAndLastName": "Joe ", //
                      "EmailAddress": "[email protected]" //
                  }
                ];

  if (SSOUserResponse.length > 1) {
      var launchArrayVal = [];
      for (var i = 0; i < SSOUserResponse.length;i++){
          launchArrayVal.push(
            { name: SSOUserResponse[i].UserName, email: SSOUserResponse[i].EmailAddress }
          );
      }

    $scope.launchArray = launchArrayVal;
    $scope.selected = {value: null};
  }

answered Jan 27, 2015 at 7:28

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FrontEnd Expert Over a year ago

Thanks for solution. +1.. Can u tell me where I was doing wrong ? for my learning.

FrontEnd Expert Over a year ago

One more thing.. I am getting.. This error in console :: XMLHttpRequest cannot load javascript:void(0);. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Aravinda · Accepted Answer · 2015-01-27 07:51:10Z

1

You want to show one radio button per result, right?

This is when you would use ng-repeat. You didn't mention what the problem was when you used ng-repeat.

Currently, in your template, you're doing {{launchArray.name}} which won't work, since launchArray is an array... it doesn't have a name property.

Using ng-repeat, you loop over each item in launchArray and render a radio button each time:

<div class="modal-body">
                <div>Please select an one data</div>
                <div ng-repeat="item in launchArray">
                    <input type="radio" name="group1" value="{{item.name}}">
                    <span>{{item.name}} ({{item.email}})</span>
                </div>
            </div>

edited Jan 27, 2015 at 7:51

answered Jan 27, 2015 at 7:26

Aravinda

1261 silver badge5 bronze badges

1 Comment

Aravinda Over a year ago

Sorry, the ng-repeat was working, but I just did not display things properly. Edited with changes. @dhavalcengg's solution is more complete.

Collectives™ on Stack Overflow

Display radio button data from array value in scope angular

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related