リストビューの配列の値を表示

Question

多くのチュートリアルを見て、多くのコードスニペットを試した後、ObservableArrayとバインディングをいつどのように使用するかについて、私はまだ混乱しています。私のjson配列からの値のリストビューを取得しようとすると、警告が表示され、コンソールは私が思ったものを表示します。唯一の仕事でないのは私のリストビューです。誰でも助けてください！私のjavascriptと対応するxmlを下に掲載しました。

----私のコードを更新しました。 itemTemplatesにそれぞれ6つの値の配列を示します。すべてのインスタンスにアクセスするには？とキー？キー：値のペアを表示する必要があり、キーが配列にないように見えます。何かを感謝！神に感謝する（これが機能するようになりました、すべてのものを再加工した後

<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 1

は、リモートソースからJSONを取得してコードを完成させました。

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

はあなたにlistview.xmlを変更してみてくださいgithub resources！）

<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> 

listview.xml

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.jsは、私はまだリモートソース（HTTP）からの私のJSON値を取得するための、いくつかの助けを得るのが大好きです。前もって感謝します！

Answer 3

：

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>