angularjs: how to access to get data results. getting undefined right now

Question

I am working on loading data from (entity framework/sql view) to a drop-down menu in my app front end.

I am able to call the server side method and successfully verify that the results contain the data that I need.

I am making a mistake in how I am accessing the elements of the data array, that I intend to use to populate the drop-down menu. After I complete the execution, the drop-down menu displays "unidefined" 37 times, which is the number of records the GET returns.

Here is what I see in Chrome developer tools:

As you can see, I assign the data.data to my $scope.MeetingListarray.

in the html view I attempt to use the contents of $scope.MeetingListas follows:

            <div>
                <select ng-model="selectedMeeting">
                    <option value="">--Select Meetings--</option>
                    <option ng-repeat="meeting in MeetingList" value="{{meeting.MeetingID}}">{{meeting.MeetingName}}</option>                      
                </select>
            </div>

AngularJS

app.controller('MyController', ['$scope', '$http', '$window', function ($scope, $http, $window) {

    $scope.selectedMeeting = null;
    $scope.MeetingList = [];

    $http({
        method: 'GET',
        url: '/VirtualMeetings/CrossReference/Home/GetMeetingList',
        data: {}
    }).then(function (data) {
        $scope.MeetingList = data;
    });

What am I doing incorrectly when populating the array and using it in the html view? Could someone please show me mi error, and the right way of coding this?

Greatly appreciated it.

Thank you.

Updated Screen-Shot

This worked for me, in order to populate the drop down menu/list

html view:

                <select ng-model="model.selectedMeeting">                        
                    <option ng-repeat="meeting in MeetingList" value="{{meeting.MeetingID}}">{{meeting.MeetingTitle}}</option> 
                    <option value="">--Select Meeting--</option>                     
                </select>

angularjs

$http({
    method: 'GET',
    url: '/VirtualMeetings/CrossReference/Home/GetMeetingList',
    data: {}
}).then(function (res) {
    $scope.MeetingList = res.data.data;
});

I needed to add one more data in the assignment of array.

charlietfl · Answer 1 · 2020-08-26T03:32:49.163

0

The then() of $http returns a response object that has a data property where you see the actual server sent data.

Try:

$http({
    method: 'GET',
    url: '/VirtualMeetings/CrossReference/Home/GetMeetingList',
    data: {}
}).then(function (res) {
    $scope.MeetingList = res.data;
});

edited Aug 26 '20 at 03:32

answered Aug 26 '20 at 03:30

charlietfl

170,828
13
121
150

Thank you for your help. Let me make that change and see if it works. Brb. – erasmo carlos Aug 26 '20 at 03:32
One other issue I see in your code is there should always be an object in `ng-model`. You can run into child scope issues when you don't have one. Golden rule...always have a dot in `ng-model`. Using `controller as` insted of `$scope syntax helps resolve such issues but if must use `$scope` create objects in controller instead of primitives – charlietfl Aug 26 '20 at 03:33
I made the suggested change. Still nothing on the drop down. I uploaded a screen shot for you to see what I see in the dev tools. Again, thank you. – erasmo carlos Aug 26 '20 at 03:39
Also better to use `ng-options` for a ` – charlietfl Aug 26 '20 at 03:40
I do not understand what is the meaning of "always have a dot in ng-model" - like: selected.Meeting? – erasmo carlos Aug 26 '20 at 03:41
1

In controller `$scope.model={selectedMeeting :null}` and in html `ng-model="model.selectedMeeting"`. Also makes it easier later when you need to submit something through `$http` send the whole model object and no need to build a new one – charlietfl Aug 26 '20 at 03:42
https://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs-models-you-are-doing-it-wrong – charlietfl Aug 26 '20 at 03:45
made changes, but still no data in drop-down menu – erasmo carlos Aug 26 '20 at 03:46
did you switch to ng-options? – charlietfl Aug 26 '20 at 03:47
not that one, how is that supposed to look like? I need to be able to have the meetingid as the value, and the meeting name as the displayed text. I don't think I understand how that works with ng-options. – erasmo carlos Aug 26 '20 at 03:50
Need to look at docs. It's been quite a few years since I used angularjs. Will find lots of other questions here about it though also. Probably some I even answered years ago – charlietfl Aug 26 '20 at 03:52
I’ll keep trying. Thank you for your help charlietfl – erasmo carlos Aug 26 '20 at 03:57
using ng-options or ng-repeat? – charlietfl Aug 26 '20 at 04:27
ng-repeat. the issue was with the results assignment. I needed to add one more data: res.data.data. That worked. I left the html for the ddl untouched with the exemption of making a change to the way I declare the model for select. I posted and update in the original post. Thank you for your help charlietfl. – erasmo carlos Aug 26 '20 at 04:31
Ohhh i missed that in the image that you send another property named data also in your object from server...sorry i missed that – charlietfl Aug 26 '20 at 04:32
I had a feeling that the problem resided in something that was right in front of us. I just keep editing that part and finally it worked. – erasmo carlos Aug 26 '20 at 04:33

angularjs: how to access to get data results. getting undefined right now

1 Answers1