0

Code to fetch object array data from server:

    var tag_Arr= [];
    var fbref = firebase.database().ref();

    fbref.child('tags').limitToFirst(1).on("child_added", function(e) {
            // console.log(e.key + ' ' + e.val().tagname);
            var obj =  {id:e.key, text:e.val().tagname};
            tag_Arr.push(obj);
});

array object hard coded in Js

var data2 = [];
         var obj1 = {id:0, text:"ding"};
         data2.push(obj1);

Why is the console log output is different for these two, Console log output screenshot

console output screenshot with expanded

How do I convert the first array just like the second one? because first output is not loading in Select2 Jquery textbox and 2nd one is loading.

I am loading the firebase results in to an array object and then pushing that data with select2. select2 code with firebase input is below, 

var dataNew = tag_Arr;

  $(".myselect").select2({
                placeholder: "select a tag",
                data: dataNew 
        });

"dataNew" is not loading. but if I give " data2" it is loading.

Even, I have tried to parse the Firebase output through JSON.parse but its throwing uncaught exception error.

user1322692
  • 173
  • 1
  • 11

1 Answers1

0

Judging from the screenshot, the object obviously hasn't been added to the first array at the time you are doing your console.log(). check network tab to see if the firebase call actually fetches the data. If it has, you are better off putting the console.log() for that particular array at this point in your code:

var obj =  {id:e.key, text:e.val().tagname};
tag_Arr.push(obj);
console.log(tag_Arr);

EDIT Based on new info

You can just move the select2 initialization to happen in the callback of the firebase ref like this:

fbref.child('tags').limitToFirst(1).on("child_added", function(e) {
        // console.log(e.key + ' ' + e.val().tagname);
        var obj =  {id:e.key, text:e.val().tagname};
        tag_Arr.push(obj);
        //if this is the first time it should receive data
        $(".myselect").select2({
            placeholder: "select a tag",
            data: tag_Arr
        });
        //else you want to update the data
        $(".myselect").select2("data", tag_Arr, true);
});
kennasoft
  • 1,595
  • 1
  • 14
  • 26
  • When I expand the output of both arrays is same. Content is visible in console log. But strangly first array is not loading in select2 where as second array is loading... – user1322692 Apr 27 '17 at 15:14
  • Yeah. Someone made a comment that firebase is async. Therefore you need to put code in the callback to populate your select2 with the data returned from firebase. – kennasoft Apr 27 '17 at 15:17
  • it might help if you added your select2 code to your question so we can see how you bind the data – kennasoft Apr 27 '17 at 15:20
  • I've updated my answer. Let me know if that works for you – kennasoft Apr 27 '17 at 17:13
  • Thank you for that, It is working. But I was wondering what was the issue with earlier code. I have done some debugging and to my understanding, "As firebase is an Async call, it was taking time to load the array before that select2 box is loaded with empty array values." Also, Kennasoft, why we need below code? //else you want to update the data $(".myselect").select2("data", tag_Arr, true); – user1322692 Apr 28 '17 at 12:01
  • I was giving you two options: (1) initialize the select2 when the firebase data returns. or (2) update the select2 data when the firebase data returns, if you have already initialized the select2 before the async call returns – kennasoft Apr 28 '17 at 12:15
  • javascript execution happens in ticks or cycles. Once an operation is asynchronous, no matter how fast it returns, every synchronous code in the same block will execute before it. That is why async code works with callbacks or promises (which is basically code you want to execute after the async operation completes). – kennasoft Apr 28 '17 at 12:20