Converting Javascript object to Javascript array

Question

I am using a knockout observable array to populate a dropdownlist.The dropdownlist gets populated if I hardcode the array values.But I am now trying to get the data from the database.I am using JSON format for the javascript object.I am accessing a single property of the javascript object i.e; Certification and I am creating an array which I am passing back to a script.But each time the value that is passed back is undefined whereas the array shows up in the console.

The code to convert to an array that I am using is

var getCertifications = function () {
    $.ajax({
    type : "GET",
    async : false,
    url : "/Provider/GetCertifications",
    dataType : "json",
    success: function (data) {
        var arrCertification = [];
        $.each(data, function (i, item) {
            arrCertification.push((item.Certification));
        });
        return arrCertification;
    },
    error : function () {
        alert(" An error occurred.");
        }
     });
 };

The code for the knockout observables is

  var certificates = getCertifications();
  self.certificationArray = ko.observableArray(certificates);

and the HTML is

 <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Certification:</label>
            <div class="col-sm-6">
                <select class="form-control" id="certification" name="certification" data-bind="value: certification, options: certificationArray, optionsCaption: 'Select a Certification'">
                </select>
            </div>
        </div>

Could some one please guide me on where I am going wrong.

James Gaunt · Accepted Answer · 2015-02-07 14:43:16Z

1

The getCertifications() function doesn't return anything. All it does is kick off an ajax call.

You need to use some sort of call back or promise object to get the results of this call. Using a callback this would look something like:

var getCertifications = function (cb) {
    $.ajax({
    type : "GET",
    async : false,
    url : "/Provider/GetCertifications",
    dataType : "json",
    success: function (data) {
        var arrCertification = [];
        $.each(data, function (i, item) {
            arrCertification.push((item.Certification));
        });
        cb(arrCertification);
    },
    error : function () {
        alert(" An error occurred.");
        }
     });
 };

 getCertifications(function(certificates) {
     self.certificationArray = ko.observableArray(certificates);
 });

A better pattern would be to use promises. The $.ajax method returns a promise. However the callback approach is a good place to start in order to get an understanding of handling asynchronous code.

edited Feb 7, 2015 at 14:43

answered Feb 7, 2015 at 14:22

James Gaunt

14.8k2 gold badges42 silver badges57 bronze badges

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

5 Comments

A NewBie Over a year ago

Doesn't the return in the success part fire.Sorry if this is a noob question.New to Ajax and Jquery.

James Gaunt Over a year ago

No that isn't doing anything. Control has already left the function by this point. The AJAX call is asynchronous, so the success gets called sometime later once the server returns the result.

A NewBie Over a year ago

Doesn't async : false make it synchronous.

James Gaunt Over a year ago

No. You can't make it synchronous. An HTTP call is asynchronous, and nothing you do on the client can change that. the async property in $.ajax is badly named. It's about making sure that if you raise multiple async events in a page they will all fire/return in the same order you raised them. Specifically it doesn't fire an ajax request until all previous requests have been completed.

A NewBie Over a year ago

Thanks for the explaination as well.Appreciate it.

Collectives™ on Stack Overflow

Converting Javascript object to Javascript array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related