Ember component this.set() dosen't rerender

I find it strange that this.set doesn't update the component. The template code is like that:

        <span value= class="checked-normal" onclick=><i class="fa checked-i"></i></span>

The js is like:

export default Ember.Component.extend({
didReceiveAttrs(){
        this.initData();
},
initData(){
        let bpIds = this.get('bpIds'),
            data = [],
            length = bpIds.length;
        for (var i = 0; i < length; i++) {
            let uri = "this is a uri";
            let key = bpIds[i];
            /* jshint loopfunc:true */
            $.getJSON(uri).then((result) => {
                let o = {
                    key:parseInt(key),
                    value:result.result.name
                };
                data.push(o);
            });
        }
        this.set('data',data);
    }
});

This component is used to get data and render itself with the bp_ids to.

However, I found it work when I change the js like that:

export default Ember.Component.extend({
didReceiveAttrs(){
        this.initData();
},
initData(){
        let data = [];
        data=[
        {key:1,value:'value1'},
        {key:2,value:'value2'}]
        this.set('data',data);
    }
});

I really don't know why. How to make the component works when I want to get data from back-end in the component?