• 1
Votes
name

While developing a NativeScript app with TypeScript and the backend is Firebase the list is not populated with the Firebase value.

Here I've attached my code files. While navigating login page to my list page no items get displayed. How can I solve this issue?

list.model.ts

function indexOf(item) {
  var match = -1;

  this.forEach((loopItem, index) => {
    if (loopItem.id === item.key) {
      match = index;
    }
  });
  return match;
};

function load() {
  var onChildEvent = (result) => {

  var viewModel = new ObservableArray();

  viewModel.indexOf = indexOf;
  var matches = [];

  if (result.type === "ChildAdded") {
    if (result.value.UID === config.uid) {
      viewModel.push({
        name: result.value.Name,
        id: result.key
      });
    }
  } else if (result.type === "ChildRemoved") {
    matches.push(result);
    matches.forEach((match) => {
    var index = viewModel.indexOf(match);

    viewModel.splice(index, 1);
  });
}

};

return firebase.addChildEventListener(onChildEvent, "/Groceries").then(
  () => {
    console.log("firebase.addChildEventListener added");
  },
  (error) => {
    console.log("firebase.addChildEventListener error: " + error);
  })
};

list.ts

var load = require("path");
var pageData = new Observable({
  groceryList: new ObservableArray([])
});

export function loaded (args: observableModule.EventData) {
  var sender = <view.View>args.object;
  var parent = sender.parent;
  var name = <Label>view.getViewById(parent, "name");

  page = args.object;
  page.bindingContext = pageData;
  load();

};

list.xml

<Page loaded="loaded">
<GridLayout rows="auto, *" columns="2*, *">
<TextField id="grocery" text="{{ grocery }}" hint="Enter a grocery item" row="0" col="0" />
    <Button text="Add" tap="addGrocery" row="0" col="1" />
    <ListView id="groceryList" items="{{ groceryList }}" row="1" colSpan="2">
        <ListView.itemTemplate>
        <GridLayout columns="*, auto">
            <Label text="{{ name }}" horizontalAlignment="left" verticalAlignment="center"/>
            </GridLayout>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>
</Page>

Regarding your given informations, please find the code below :

/*
 * list.model.ts
 */

 export function load(fnResultCallback) {
    var onChildEvent = (result) => {
        var items = [];
        var matches = [];

        if (result.type === "ChildAdded") {
            if (result.value.UID === config.uid) {
                items.push({
                    name: result.value.Name,
                    id: result.key
                });
            }
        } else if (result.type === "ChildRemoved") {
            matches.push(result);
            matches.forEach((match) => {
                var index = indexOf(match, items);
                items.splice(index, 1);
            };
        }

        fnResultCallback(items);
    };
    firebase.addChildEventListener(onChildEvent, "/Groceries").then(
        () => {
            console.log("firebase.addChildEventListener added");
        },
        (error) => {
            console.log("firebase.addChildEventListener error: " + error);
        });
    }
 }

function indexOf(item, items) {
  var match = -1;

  items.forEach((loopItem, index) => {
    if (loopItem.id === item.key) {
      match = index;
    }
  });
  return match;
};

/*
 * list.ts
 */

var model = require("path");
var pageData = new Observable({
  groceryList: new ObservableArray([])
});

export function loaded (args: observableModule.EventData) {
  var sender = <view.View>args.object;
  var parent = sender.parent;
  var name = <Label>view.getViewById(parent, "name");

  page = args.object;
  page.bindingContext = pageData;
  model.load((result) => {
    pageData.groceryList = new ObservableArray(result);
  });
};
  • 0
Reply Report