Anzeige von Array-Werten in Listenansicht

Question

Nachdem ich viele Tutorials gesehen und viele Codeschnipsel ausprobiert habe, bin ich immer noch verwirrt darüber, wann und wie ObservableArray und Binding zu verwenden ist. Versucht, eine Liste der Werte von meinem JSON-Array zu bekommen - Alarm zeigt ihnen, Konsole zeigt, was ich dachte, es würde. Das einzige, was nicht funktioniert, ist mein Listenansicht. jede Hilfe von irgendjemandem bitte! gepostet mein Javascript und entsprechende XML unten.

---- meinen Code aktualisiert. zeigt ein Array mit sechs Werten, von denen jeweils eines in den itemTemplates enthalten ist. Wie kann ich auf jede Instanz zugreifen? und die Schlüssel? müssen Schlüssel: Wert-Paare anzeigen und scheinbar fehlen die Schlüssel im Array. alles geschätzt!

listview.js

testJsonArray = { 
"results": [{ 
    "testName": "Multiplizieren", 
    "testKlasse": 3, 
    "testFach": "Mathematik" 
    }, 
      { 
    "testName": "Addieren", 
    "testKlasse": 3, 
    "testFach": "Mathematik" 
    }] 
}; 

function onPageLoaded(args) { 
var page = args.object; 

var observableArray = require("data/observable-array"); 
var i = testJsonArray.results.length; 

var tests = new observableArray.ObservableArray([]); 

while (i--) { 
t = testJsonArray.results[i]; 
tests.push([t.testName, t.testKlasse, t.testFach]); 
}; 

var c = tests.length; 
while (c--) { 
console.log(c); 
}; 

alert(tests); 

page.bindingContext = {myItems: tests}; 

} 

exports.onPageLoaded = onPageLoaded; 

listview.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded"> 
<ScrollView> 
<ListView id="listview" items="{{ myItems }}"> 
    <ListView.itemTemplate> 
     <StackLayout orientation="horizontal"> 
     <Label text="{{ $value }}" /> 
     </StackLayout> 
    </ListView.itemTemplate> 
</ListView> 
</ScrollView> 
</Page> 

Answer 1

Abschluss des Codes mit dem Abrufen eines JSON von einer Remote-Quelle.

var http = require("http"); 
var Observable = require("data/observable").Observable; 
var ObservableArray = require("data/observable-array").ObservableArray; 

var page; 
var tests = new ObservableArray([]); 
var pageData = new Observable(); 

    exports.pageLoaded = function(args) { 
    page = args.object; 
    page.bindingContext = pageData; 

    http.getJSON("http://www.example.com/mypath/insertfilename.json").then(function(r) { 
    var testList = r.remotesource; //remotesource = topmost parameter in JSON 

    for (var i = 0; i < testList.length; i++) { 

      tests.push({ 
       testName: testList[i].testName, 
       testKlasse: testList[i].testKlasse, 
       testFach: testList[i].testFach 
      }); 
     } 

    }, function(e) { 

       console.log(e); 

      }); 

      // console.dir(tests); 

    pageData.set("tests", tests); 
    }; 

Answer 2

Versuchen Sie listview.xml an sich ändernde:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded"> 
    <ListView id="listview" items="{{ tests }}"> 
     <ListView.itemTemplate> 
      <StackLayout orientation="horizontal"> 
      <Label text="{{ name }}" /> 
      </StackLayout> 
     </ListView.itemTemplate> 
    </ListView> 
</Page> 

Answer 3

Nachdem alles überarbeitet, das funktioniert jetzt (Gott sei Dank für github resources!)

listview.js

data = [{ 
"testName": "Multiplizieren", 
"testKlasse": 3, 
"testFach": "Mathematik" 
    }, 
    { 
"testName": "Addieren", 
"testKlasse": 3, 
"testFach": "Mathematik" 
    }] 

var Observable = require("data/observable").Observable; 
var ObservableArray = require("data/observable-array").ObservableArray; 

var page; 
var items = new ObservableArray([]); 
var pageData = new Observable(); 

exports.pageLoaded = function(args) { 
page = args.object; 
page.bindingContext = pageData; 

items.push(data); 

pageData.set("items", items); 

}; 

listview.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:lv="nativescript-pro-ui/listview" loaded="pageLoaded"> 

<ActionBar title="TableTest" class="action-bar" /> 

<lv:RadListView id="listview" items="{{ items }}" class="list-group" pullToRefresh="false" pullToRefreshInitiated="pullToRefreshInitiated"> 
    <lv:RadListView.listViewLayout> 
     <lv:ListViewLinearLayout scrollDirection="Vertical"/> 
    </lv:RadListView.listViewLayout> 
    <lv:RadListView.itemTemplate> 
    <StackLayout> 
       <Label text="{{ testName }}" /> 
       <Label text="{{ testKlasse }}" class="list-group-item-heading"  /> 
       <Label text="{{ testFach }}" class="list-group-item-text" /> 
    </StackLayout> 
    </lv:RadListView.itemTemplate> 
</lv:RadListView> 

</Page> 

Ich würde noch gerne etwas Hilfe bekommen, um meinen JSON-Wert von einer entfernten Quelle (http) zu erhalten. Danke im Voraus!