CODEWITHSUNDEEP
javascriptjsonlistviewnativescript
stefanvz
stefanvz

Reputation: 55

display values of array in listview

After watching many tutorials and trying out a lot of code snippets, i am still confused about when and how to use ObservableArray and binding. Trying to get a listview of values from my json array - alert shows them, console displays what i thought it would. the only thing not working is my listview. any assistance by anyone please! posted my javascript and corresponding xml below.

----updated my code. shows an array of six values with one of each in the itemTemplates. how to access every instance? and the keys? need to display key: value pairs and seemingly the keys are missing in the array. anything appreciated!

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>

Upvotes: 0

Views: 900

Answers (3)

stefanvz
stefanvz

Reputation: 55

After reworking everything, this works now.

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>

Upvotes: 1

stefanvz
stefanvz

Reputation: 55

finalized the code with getting a JSON from a remote source.

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);
    };

Upvotes: 1

R4h4
R4h4

Reputation: 65

Try changing your listview.xml to:

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

Upvotes: 0

Related Questions