Having trouble populating an OnsenUI list with AngularJS parse in Cordova

I have been working on retrieving a list of names from parse and adding them to an onsenui list. The parse query seems to be functioning correctly as I logged the results successfully, but for some reason, the list items are not appearing anywhere.

Below is the content of app.js

(function(){
var app = angular.module('myApp', ['onsen.directives']);
app.factory('Data', function(){
    var Data = {};

    Data.items = [];

    var parseAPPID = "***************************************";
    var parseJSID = "****************************************";

    //Initialize Parse
    Parse.initialize(parseAPPID,parseJSID);

    var NoteOb = Parse.Object.extend("place");

    //$(document).on("pageshow", "#places", function(e, ui) {
    //$.mobile.loading("show");
    var Places = Parse.Object.extend("Places");
    var query = new Parse.Query(Places);
    query.limit(100);
    query.ascending("Name");

    query.find({
        success:function(results) {
            for(var i=0; i<results.length; i++) {
                Data.items[i] = results[i].get('Name');
            }
        },error:function(e) {


        }
    });

    return Data;
});

app.controller('listCtrl', function($scope, Data) {
    $scope.items = Data.items;
});
})();

And here is the HTML code:

Index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
... (omitted for brevity)
</body>
</html>

List.html:

<!DOCTYPE HTML>

<html>
<head>
... (omitted for brevity)
</body>
</html>

Answer №1

After referencing this source, I made adjustments to my response:

(function(){
var app = angular.module('myApp', ['onsen.directives']);
app.factory('Data', function($q){



var parseAPPID = "***************************************";
var parseJSID = "****************************************";

//Initialize Parse
Parse.initialize(parseAPPID,parseJSID);

var Data = Parse.Object.extend("Places", {
  // Instance methods
}, {
  async: function() {
    var deferred = $q.defer();
    var query = new Parse.Query(Places);
    query.limit(100);
    query.ascending("Name");

    query.find({
        success:function(results) {
            // Resolve the deferred $q object before returning the promise
            deferred.resolve(results);
            for(var i=0; i<results.length; i++) {
                Data.items[i] = results[i].get('Name');
            }
        },error:function(e) {


        }
    });
    return deferred.promise;
  }
});

return Data; 

});

app.controller('listCtrl', function($scope, Data) {

    Data.async().then(function(d) {
        $scope.items = d.items;
    });  
});

})();

Best of luck. You may also find this helpful: AngularJS: service query returning zero result.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to including a parameter in a URL to activate a jQuery function upon page load

Can a URL parameter, such as , be added? Is it possible for jQuery to detect if the "open" parameter is set to "true" on document ready and then execute a function? Thank you. ...

Modifying properties of an array of objects in React Native using JavaScript

I have a scenario where I am using Flatlist to render a couple of boxes. If the "shapes" element's "visible" key is false, the box will be blank. This visibility property is defined in state and I'm not sure if this is the correct approach. Now, ...

Ways to create distance between repeated cards in a loop. My method involves utilizing ajax, jquery, and bootstrap

view image description here What is the best way to create some space between these closely aligned cards? .done((todos) => { todos.forEach(el => { console.log(el) $("#todo-list").append(` <d ...

Highlighting a row upon being clicked

How can I implement a feature in my HTML page that highlights a row when selected by changing the row color to #DFDFDF? If another row is selected, I would like the previously selected row to return to its original color and the newly selected row to be h ...

Dealing with success in a personalized JavaScript function

When making an ajax call, it is possible to add success handling, and I would like to incorporate similar logic into my custom functions. I currently have 6-10 custom functions that need to run either sequentially or independently. They are currently dais ...

Retrieve all findings related to an ongoing loop update issue within react-table

Check out this Playground Sandbox where custom hooks for react-table have been set up to allow for customized search and row selection features. However, after selecting a single row, some unexpected behavior occurs, including the select All option not f ...

What is the best way to selectively print the contents of a child window upon page load?

I've created a function that opens a child window and fills it with content using AJAX. function OpenWindow(){ jQuery.ajax({ type: 'POST', data: { //some fields }, url: 'getPageForPrint.php', su ...

Changing an array into a list using javascript

function convertArrayToList(inputArray) { let list = null; for (let i = inputArray.length - 1; i >= 0; i--) { list = { value: inputArray[i], rest: list }; } return list; } let result = convertArrayToList([10, 20]); console.log(JSON.stringi ...

Retrieving information from a JSON reply within an Angular 2 service

I am currently utilizing a service in angular 2 that retrieves JSON data from an API (). The code for fetching the data is depicted below: getImages() { return this.http.get(`${this.Url}`) .toPromise() .then(response => response.json() ...

What are the steps to adjust the size of a browser window in WebDriverJS?

Currently, I am utilizing WebDriverJS, the JavaScript bindings for WebDriver, to conduct basic frontend testing (powered by nodejs). Nevertheless, encountering challenges resizing the window and the documentation available appears somewhat unclear in my u ...

How can I access the object that created an interval from inside an interval callback function?

I am facing a challenge with JavaScript as a beginner. I am working on a React App and trying to add a timer feature to it. I have successfully created the timer functionality, but the issue lies in the timer callback (similar to this query: setInterval in ...

A comprehensive method in JavaScript to determine if a variable is defined

There was a moment when I recall stumbling upon a code snippet that utilized a javascript library, possibly lodash, to perform a comprehensive check for the existence of a certain element. For instance: someLib.isDefined(anObject.aNestedObject.anotherNes ...

How can one retrieve specific key values from all random IDs in a Realtime Database, using Firebase functions with JavaScript?

Looking to retrieve the locations of all users in order to find nearest friends Here is an example of my Firebase Real-time database structure: ---> users ---> userRandomId ---> name: location :[12312,213123] ---> ...

Learn how to utilize the Angular reactive form to set default values based on a previously saved object

My work on the reactive form is almost complete, with all basic logic in place. However, I am facing a single issue that is holding me back. As per the requirements, all input fields should be pre-filled with previously entered data by the user, if availab ...

"Adjusting Flex Items Dynamically When Resizing the Screen

Hello everyone, I am a new web developer looking to create a calendar using only pure JS. Currently, I have managed to wrap elements on overflow. My question is: how can I efficiently 'destroy' and 'create' new nodes in a responsive ma ...

How can we create a JavaScript function that compares the value in an object with the value selected in an HTML dropdown menu?

Looking to develop an innovative NFL playoffs bracket with dynamic functionality using javascript. Unlike a typical tournament bracket, the match-ups in rounds 2 and 3 will be determined by the teams' ranks. To achieve this, I have created a comprehen ...

Obtaining an array from an object with Meteor and MongoDB

I've been struggling for about a week trying to accomplish a simple task with MongoDB. Here is the document I'm working with: { _id: "mkikuQzrYdyQjL7Ry", links:[ 1: "link1" 2: "link2" 3: "link3" 4: "link4" ] } Is there a way to retrieve al ...

Execute a function in HTML that has been declared in the controller

Is there a way to automatically trigger a function when an HTML page is loaded? Currently, the function is manually invoked by clicking a button, as shown below: <p> {{address}} </p> <button class="btn btn-primary checkout" ng-click="g ...

The video continues to play despite me opening the modal

I am facing an issue with a video tag where the video keeps playing in the background even when my modal is open. I want the video to stop playing once the modal is opened. Here is the code snippet: const videoRef = useRef(null); function pauseVideo() ...

Attempting to send an HTTP request to an insecure API in NEXTJS in a production environment has resulted in failure

When attempting to send a request to a public API that is not hosted in HTTPS but instead in HTTP, everything works fine locally on localhost. However, upon deploying to Vercel production build with the API URL changed to HTTPS, an error occurs. axios.get( ...