NativeScript - an array in listview

Question

I am new to NS, and I am trying to display the list of passengers in the list of attractions (there are a lot of passengers on each trip).

So, I tried to put listview (passengers) in the global list (attractions), a list of views for the trip, but not for the passenger (obviously), I do not think this is the right way to do this.

here is my code:

rides.xml:

    <ListView items="{{ ridesList }}" id="ridesList">
  <ListView.itemTemplate>
    <!-- Rides -->
    <StackLayout class="box" orientation="vertical">
      <GridLayout class="boxHeader" rows="auto" columns="*">
        <Label class="title" verticalAlignment="center" horizontalAlignment="left" text="{{reference}}" />
      </GridLayout>
      <StackLayout class="boxContent" orientation="vertical">
        <GridLayout class="checkpoints" rows="auto, auto" columns="80, *, 60">
          <!-- -->
          <ListView items="{{ passagers }}" id="passagersList">
            <ListView.itemTemplate>
                <StackLayout class="timedate" orientation="vertical" row="0" col="0">
                  <Label class="time" text="14:32" />
                  <Label class="firstname" text="{{firstname}}" />
                </StackLayout>
                [...]
              </ListView.itemTemplate>
            </ListView>
        </GridLayout>
      </StackLayout>
    </StackLayout>
    <!-- /Rides -->
  </ListView.itemTemplate>
</ListView>

rides.js

    var ride = new RideViewModel([]);
[...]
exports.loaded = function(args) {
    var page = args.object;
        page.bindingContext = ride;

            ride.futurCourse().then(function(data) {
                                [...]

                                ride.fillFuturCourse(data);
            });
};

ride-view-model.js

viewModel.fillFuturCourse = function(data){

  var testdModel = new ObservableArray();
  var jsone = JSON.parse('{"course":[{"id":"5","reference":"test","passagers":[{"firstname":"julien"},{"firstname":"andre"}]},{"id":"6","reference":"RF7878788"}]}');
  testdModel= jsone.course;
  viewModel.set("ridesList",testdModel);
};

Thank!

Answer 1

So, I found a solution, use repeater , not forgetting to enable the global layout after the relay (here gridlayout here)

rides.xml:

    <ListView items="{{ ridesList }}" id="ridesList">
  <ListView.itemTemplate>
    <!-- Rides -->
    <StackLayout class="box" orientation="vertical">
      <GridLayout class="boxHeader" rows="auto" columns="*">
        <Label class="title" verticalAlignment="center" horizontalAlignment="left" text="{{reference}}" />
      </GridLayout>
      <StackLayout class="boxContent" orientation="vertical">
        <GridLayout class="checkpoints" rows="auto, auto" columns="80, *, 60">
          <!-- -->
        <Repeater items="{{ passagers }}">
            <Repeater.itemTemplate>
                <GridLayout class="checkpoints" rows="auto, auto" columns="80, *, 60">
                       <StackLayout class="timedate" orientation="vertical" row="0" col="0">
                          <Label class="time" text="14:32" />
                          <Label class="firstname" text="{{firstname}}" />
                          </StackLayout>
                          [...]
                </GridLayout>
            </Repeater.itemTemplate>
        </Repeater>
        </GridLayout>
      </StackLayout>
    </StackLayout>
    <!-- /Rides -->
  </ListView.itemTemplate>
</ListView>