Cordova: OnsenUI list not being populated angularjs parse

Question

I am trying to pull a list of names from parse and add them to an onsenui list, the parse query is working because I logged them and it worked, but the list items aren't showing up anywhere.

Here is the 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 pages

Index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height      attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-    scale=1, user-scalable=no">
    <meta name="msapplication-tap-highlight" content="no" />

    <!--<link rel="stylesheet" src="http://code.jquery.com/jquery-1.9.1.css"></link>-->
    <!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">    </script>-->

    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
    <link rel="stylesheet" href="lib/onsen/css/topcoat-mobile-onsen-blue.css">
    <script src="http://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
    <script src="lib/onsen/js/angular/angular.js"></script>    
    <script src="lib/onsen/js/angular/angular-touch.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script> 

<title>MY APP</title>
</head>
<body>
    <ons-navigator page="list.html">
    </ons-navigator>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

list.html:

<!DOCTYPE HTML>

<html>
<head>
    <title>List A-Z</title>
</head>

<body>
    <ons-page class="center">
        <div ng-controller="listCtrl">
            <ons-list>
                <ons-list-item ng-repeat="item in items">
                    {{item}}
                </ons-list-item>
            </ons-list>
        </div>
    </ons-page>
</body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

According to this link, I updated my answer as follows:

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

})();

Good luck. And you may need to see this: AngularJS: service query returning zero result.

edited May 23 '17 at 12:20

Community

1
1

answered Aug 18 '14 at 08:56

khemry

585
3
7

It does work with normal data, which is really bugging me because there is no reason why it shouldn't work here as far as I can see, I even logged Data.items[i] after assigning values and it was displaying the strings I was trying to get. – deavisdude Aug 19 '14 at 12:23
Can u show me an example of your Data? I wanna see its format. – khemry Aug 20 '14 at 02:37
It is a list of restaurants, I'm pretty sure that I only get the String value Name in alphabetical order here. I didn't do much formatting, I just went into the data browser on parse and added columns for things I wanted to store and a row for each place, is there more to it than that? – deavisdude Aug 20 '14 at 13:17
One more thing is that I get this error in the chrome console when running the app with ripple: "cordova :: XMLHttpRequest :: setRequestHeader does not work with JSONP." – deavisdude Aug 20 '14 at 21:43
So your data is JSONP format? Isn't Parse data is just normal JSON format though? Anw, it maybe the problem of ripple. How about try to disable "Cross Domain Proxy" in the Ripple settings. As long as the Data.items receives correct data, there seems to no problem with your code or OnsenUI at all. – khemry Aug 22 '14 at 03:28
The Cross Domain Proxy thing got rid of the error, but I think I have identified the problem. Data is undefined in the ListCtrl and even right before the return statement. The only place where it has values is in the for loop... – deavisdude Aug 25 '14 at 23:29
This didn't seem to fix anything... async is now undefined – deavisdude Sep 02 '14 at 00:23
Feedback: "TypeError: Cannot read property 'then' of undefined" – deavisdude Sep 02 '14 at 00:42
Did you update your code as above? According to your error, it seems like you don't have async fund in the factory. Can you check your code again? In my code, there is a async func inside of it. – khemry Sep 02 '14 at 02:41
Yes, async is not defied still. I did add the changes you made to your answer at the time of this comment as well and now it is $q that is undefined"ReferenceError: $q is not defined" – deavisdude Sep 02 '14 at 17:37
Sorry, just missed $q as a parameter, there are no longer any errors in the console, but I am still not getting the results I am looking for... Nothing is displayed on my list and when I tried to log d.items[0] in the final function where the items are added to the list it tells me that d.items is undefined which is odd because no error is given for the preceding line – deavisdude Sep 02 '14 at 17:43
@deavisdude: I updated my answer. It's hard when I can't really test your code. If this updated answer is still not working, i don't know what else to do unless you can give me a complete code to test. Good luck anyway. – khemry Sep 04 '14 at 04:13
1

Ok, great news: the code seems to be working now except that data is being populated with entire objects and not just the attribute I specified... In fact, data.items is empty at the end of the execution, but Data has all of the parse objects I asked for in the correct order (alphabetized), but it is the entire object instead of just the names... Here is an example of a list item when I set scope.items to d(d.items is undefined, but d holds the objects): http://imgur.com/sSQF5b0 – deavisdude Sep 08 '14 at 01:58
OK, despite the confusion, I was able to get the list to be names like this: create an array called names, loop through d.length assigning names[i] to d[i].attributes.Name and finally setting scope.items to names! – deavisdude Sep 08 '14 at 02:04

Cordova: OnsenUI list not being populated angularjs parse

1 Answers1