Wie fülle ich eine ListView in NativeScript mit JSON-Daten von einem WebService?

Question

Ich benutze NativeScript + JavaScript. Ich versuche, eine ListView mit Daten JSON-Daten von einer API zu füllen. Die Web-Anfrage funktioniert so, wie sie sollte, aber ich kann es nicht schaffen, die Daten, die ich vom Server abrufe, zur ListView hinzuzufügen. Aber ich kann fest codierte Daten zum ListView hinzufügen.

Hier ist der Code meiner Viewmodel:

"use strict"; 
var config = require ("../../shared/config"); 
var observableModule = require("data/observable"); 
var observable_array_1 = require("data/observable-array"); 
var arrayOfDataItems; 

var ViewModel = (function() { 

function ViewModel() { 
    this.initDataItems(); 
} 
Object.defineProperty(ViewModel.prototype, "dataItems", { 
    get: function() { 
     return this._items; 
    }, 
    enumerable: true, 
    configurable: true 
}); 
ViewModel.prototype.onAddItemClick = function (args) { 
    this._items.push(new DataItem("1","Fooo","Bar")); 
}; 

ViewModel.prototype.initDataItems = function (args) { 
    this._items = new observable_array_1.ObservableArray(); 

    //conifg.apiUrl holds the URL where i make the GET Request 
    //I can populate the ListView if i write this._items.push(new DataItem("1","Lorem","Ipsum" here 
    return fetch(config.apiUrl + "competition") 
    .then(function(response) { 
     return response.json();   
    }).then(function(data) { 
     for (var i = 0; i < data.length; i++) { 
      //I can't populate the ListView here when I get the response from the server    
      this._items.push(new DataItem(data[i].id,data[i].name,"Useless Description")); 
     } 
    }); 
}; 

return ViewModel; 
}()); 
exports.ViewModel = ViewModel; 

var DataItem = (function (_super) { 
__extends(DataItem, _super); 
function DataItem(id, name, description) { 
    _super.call(this); 
    this.id = id; 
    this.itemName = name; 
    this.itemDescription = description; 
} 
Object.defineProperty(DataItem.prototype, "id", { 
    get: function() { 
     return this.get("_id"); 
    }, 
    set: function (value) { 
     this.set("_id", value); 
    }, 
    enumerable: true, 
    configurable: true 
}); 
Object.defineProperty(DataItem.prototype, "itemName", { 
    get: function() { 
     return this.get("_itemName"); 
    }, 
    set: function (value) { 
     this.set("_itemName", value); 
    }, 
    enumerable: true, 
    configurable: true 
}); 
    Object.defineProperty(DataItem.prototype, "itemDescription", { 
    get: function() { 
     return this.get("_itemDescription"); 
    }, 
    set: function (value) { 
     this.set("_itemDescription", value); 
    }, 
    enumerable: true, 
    configurable: true 
}); 
return DataItem; 
}(observableModule.Observable)); 
exports.DataItem = DataItem; 

Dies ist der Code meines Controllers

var BasePage = require("../../shared/BasePage"); 
var topmost = require("ui/frame").topmost; 




var CompetitionPage = function() {}; 
CompetitionPage.prototype = new BasePage(); 
CompetitionPage.prototype.constructor = CompetitionPage; 

var viewModel = require("~/views/results/observable-array-model"); 

CompetitionPage.prototype.onPageLoaded = function(args) { 
    var page = args.object; 
    page.bindingContext = new viewModel.ViewModel 
} 

module.exports = new CompetitionPage(); 

Und hier ist die XML meiner Listview

 <GridLayout loaded="onPageLoaded" orientation="vertical" rows="50, *"> 
     <StackLayout orientation="vertical" backgroundColor="#f8f8f8"> 
     <StackLayout row="0" orientation="horizontal" horizontalAlignment="center"> 
       <Button text="Add" tap="{{onAddItemClick}}" ios:margin="0"/> 
       <Button text="Del" tap="{{onRemoveItemClick}}" ios:margin="10"/> 
       <Button text="Update" tap="{{onUpdateItemClick}}" ios:margin="10"/> 
       <Button text="Reset" tap="{{onResetClick}}" ios:margin="10"/> 
      </StackLayout> 
      </StackLayout> 
      <lv:RadListView items="{{ dataItems }}" row="1" id="ls"> 
       <lv:RadListView.listViewLayout> 
        <lv:ListViewLinearLayout scrollDirection="Vertical"/> 
       </lv:RadListView.listViewLayout> 
       <lv:RadListView.itemTemplate> 
        <StackLayout orientation="vertical"> 
         <Label fontSize="20" text="{{ _itemName }}"/> 
         <Label fontSize="14" text="{{ _itemDescription }}"/> 
         <Label fontSize="10" text="{{ _id }}" /> 
        </StackLayout> 
       </lv:RadListView.itemTemplate> 
      </lv:RadListView> 

     </GridLayout> 

Answer 1

Es sieht aus wie Sie passieren nicht die richtigethis zu die .then der Abrufoperation.

Speichern Sie einfach die aktuell diese in einem WeakRef und verwendet, die in der Callback:

ViewModel.prototype.initDataItems = function (args) { 
    this._items = new observable_array_1.ObservableArray(); 

    var that = new WeakRef(this); 

    return fetch(config.apiUrl + "competition") 
    .then(function(response) { 
     return response.json();   
    }).then(function(data) { 
     for (var i = 0; i < data.length; i++) { 

      that.get()._items.push(new DataItem(data[i].id,data[i].name,"Useless Description")); 
     } 
    }); 
};