title: How to populate a ListView in NativeScript with JSON Data from a WebService?
body: <p>I'm using NativeScript + JavaScript. I'm trying to populate a ListView with data JSON-Data from an API. The Web-Request works like it should but I can't manage to add the data i fetch from the server to the ListView. But I'm able to add hard-coded data to the ListView. </p>
  
  <p>Here's the code of my ViewModel:</p>
  
  <pre><code>"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 &lt; 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;
  </code></pre>
  
  <p>This is the code of my Controller</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>And here is the XML of my ListView</p>
  
  <pre><code>      &lt;GridLayout loaded="onPageLoaded" orientation="vertical" rows="50, *"&gt;
        &lt;StackLayout orientation="vertical" backgroundColor="#f8f8f8"&gt;
        &lt;StackLayout row="0" orientation="horizontal" horizontalAlignment="center"&gt;
                &lt;Button text="Add" tap="{{onAddItemClick}}" ios:margin="0"/&gt;
                &lt;Button text="Del" tap="{{onRemoveItemClick}}"   ios:margin="10"/&gt;
                &lt;Button text="Update" tap="{{onUpdateItemClick}}" ios:margin="10"/&gt;
                &lt;Button text="Reset" tap="{{onResetClick}}" ios:margin="10"/&gt;
            &lt;/StackLayout&gt;
            &lt;/StackLayout&gt;
            &lt;lv:RadListView items="{{ dataItems }}" row="1" id="ls"&gt;
                &lt;lv:RadListView.listViewLayout&gt;
                    &lt;lv:ListViewLinearLayout scrollDirection="Vertical"/&gt;
                &lt;/lv:RadListView.listViewLayout&gt;
                &lt;lv:RadListView.itemTemplate&gt;
                    &lt;StackLayout orientation="vertical"&gt;
                        &lt;Label fontSize="20" text="{{ _itemName }}"/&gt;
                        &lt;Label fontSize="14" text="{{ _itemDescription }}"/&gt;
                        &lt;Label fontSize="10" text="{{ _id }}" /&gt;
                    &lt;/StackLayout&gt;
                &lt;/lv:RadListView.itemTemplate&gt;
            &lt;/lv:RadListView&gt;
  
        &lt;/GridLayout&gt;
  </code></pre>