oj-select-one show undefined for all options

Question

i have an observable array that get its values from REST

$.getJSON(rootModel.soho()).
        then(function (StudentCourseView1) {
            $.each(StudentCourseView1.items, function () {
                self.data.push({
                    StudentId: this.StudentId,
                    CourseId: this.CourseId,
                    Enrollmentdate :this.Enrollmentdate,
                    Notes :this.Notes,
                    Id : this.Id,
                    CourseName : this.CourseName,
                    StudentName: this.StudentName
                });
            });
                    });
             self.dataSource = new oj.ArrayTableDataSource(
              self.data, 
              {idAttribute: 'Id'}
      );

and i have created select-one like this

 <oj-select-one id="select1" style="max-width:20em"
                 options={{data}}
                 value="{{data.Id}}"
                 options-keys="[[data.StudentName]]" >
</oj-select-one>

the select one show undefined for all it options

Answer 1

Are you sure the ajax call is working, and there are no errors in console? Is the drop-down showing a list of blank values?

If yes, then the only missing element is adding option-keys attribute, to explain what data to show the user, and the key for each piece of data.

<oj-select-one id="select1" style="max-width:20em"
                 options={{data}}
                 options-keys="{{optionKeys}}" 
                 value="{{StudentId}}">

JS

//You can change this acc. to your convenience.
self.optionKeys = {value:"Id", label:"StudentName"};