Getting objects in dropdown Angular

Question

I am trying to populate JSON data to HTML Dropdown and I did it successfuly. Now what I want is: To get ID of selected listitem when I click on it (id which is coming in JSON not the DOM id) So I did it like this:

$http({
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
            'Accept':       'application/json'
        },
        url:    'someURL',
        method: 'GET',
    })
    .then(function(response, status, headers, config) {
        var myData1 = JSON.parse(response.data);
        // Preparing data to send to DOM
        var myNames = [];

        $.each(myData1, function(index, value){
            // I can use some real data instead of 'Some static string' but just because of ease. I am passing it hard coded.
            myNames.push({"name": "Some static string",
                          "id":   1});
        })
       /* This is with real data
       $.each(myData1, function(index, value){
        myNames.push({"name": value.stationNameEn,
                      "id":   value.stationNameid});
      })
      */

        $scope.names = JSON.stringify(myNames);
        console.log(myNames);
        })

    .catch(function(error, status, headers, config){
            console.log("Some problem occured: " + JSON.stringify(error)); 
        })


    // Sending data to DOM
    $scope.formData = {};

    $scope.dropboxitemselected = function (item) {
        $scope.formData.selectedItem = item;
    console.log($scope.formData.selectedName);
    }

On my DOM I have:

<select class="ion-input-select padding"
        ng-model="formData.selectedName" 
        ng-options="x for x in names"
        ng-change="dropboxitemselected();"
        >
</select>

 selectedName: {{formData.selectedName}}

Problem: I am getting all results as Objects, when I JSON.stringify() it, it splits into individual letter, like:

r e s u l t s

What I want is: Getting id which is coming from JSON, when I click on list item.

you don't JSON.stringify the myNames.. just $scope.names = myNames maybe? — tanmay
– tanmay, Commented May 17, 2017 at 6:59
Hello! I agree. It was just for the sake that I try doing it as well. But when I don't use it my list item is having object and object and object. So I don't know what to do. — fWd82
– fWd82, Commented May 17, 2017 at 7:05
Do you guys have any conventional way that, When I click on dropdown item of html I get id of it (id not of index, but id of database). — fWd82
– fWd82, Commented May 17, 2017 at 7:06

Naveen Kumar G C · Accepted Answer · 2017-05-17 07:15:09Z

1

You can change things like this to achieve which you wanted :

In controller :

change line:

 $scope.names = JSON.stringify(myNames); to $scope.names = myNames

In the View / DOM :

<select class="ion-input-select padding"
        ng-model="formData.selectedName" 
        ng-options="x as x.name for x in names"
        ng-change="dropboxitemselected();"
        >
</select>

 selectedName: {{formData.selectedName.name}}

To retrieve Id in your controller :

$scope.dropboxitemselected = function () {
        Console.log($scope.formData.selectedName.id);
    }

answered May 17, 2017 at 7:15

Naveen Kumar G C

1,3921 gold badge10 silver badges12 bronze badges

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

2 Comments

fWd82 Over a year ago

You saved my life. Thank You very much. Hail SO Community

fWd82 Over a year ago

Just for the sake of learning, How do other people get ID (of db) from list item when they click on it. Can you (anyone) please post some links.

Manas · Accepted Answer · 2017-05-17 07:14:27Z

1

I think the problem is because of

$scope.names = JSON.stringify(myNames);

The above code will convert the myNames object into a string. When you provide a string in ng-repeat it iterates over each character and hence, you get each letter. Instead, just use

$scope.names = myNames;

edited May 17, 2017 at 7:14

answered May 17, 2017 at 7:03

Manas

8481 gold badge7 silver badges16 bronze badges

1 Comment

fWd82 Over a year ago

Thank You very much @Manas Hemrajani. Indeed your guess was right. It helped 50% to solve my problem.

Collectives™ on Stack Overflow

Getting objects in dropdown 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