CODEWITHSUNDEEP
javascriptangularjsparse-platform
user2837319
user2837319

Reputation: 105

java script - using parse.com query with angular ng-repeat

I make a query from parse.com angd get and array of 2 object. Now I want to user ng-reapet('phone in phones') , so I need to convert it to json. I didn't suucess to do it. for some reason, it doesnt see the result as a json.

  var Project = Parse.Object.extend("Project");
  var query = new Parse.Query(Project);
  query.find({
      success: function (results) {
          var allProjects = [];
          for (var i = 0; i < results.length; i++) {
              allProjects.push(results[i].toJSON());
          }
          $scope.phones = allProjects;
          //i also tried this :               $scope.phones = JSON.stringify(allProjects);
      },
      error: function (error) {
          alert("Error: " + error.code + " " + error.message);
      }
  });

Thanks

Upvotes: 0

Views: 789

Answers (3)

Abs
Abs

Reputation: 455

Do not use .get function on Parse in you angular code, its not working any more, plus its not a good idea to change your angular code because your object is three level nested and need a get method.

The proper way is to extend the object and then map the values back to whatever items you need in that class. Then you can bind in normally to ng-repeat without changing your html code specifically for Parse.

var Game = Parse.Object.extend("Game"); 
var query = new Parse.Query(Game);
query.find({
success: function(results) {
  $scope.$apply(function() {
  $scope.games = results.map(function(obj) {
    return {points: obj.get("points"), gameDate: obj.get("gameDate"),  parseObject: obj};
  });
});
},

error: function(error) {
  console.log(error);
}

Upvotes: 1

Kelly Kiernan
Kelly Kiernan

Reputation: 365

Not sure if you already figured this out, but I was having a similar issue and found your post. I'm not sure what your HTML looks like, but I ended up using the Parse.Object's get method in my repeater like so:

<ul ng-repeat="list in lists">
    <li>
        <a ng-href="#/lists/{{list.id}}">{{list.get('title')}}</a>
    </li>
</ul>

I also looked into using promises so that the Parse query success callback actually updates the view when you set $scope.phones to the query result. My code is similar to yours but my object is List instead of Project. Here is what mine looks like:

// Define your Parse object
var List = Parse.Object.extend('List');

// Define a function that runs your Parse query. Use an angular promise so that
// the view updates when you set your $scope var equal to the query result
function getList() {
    var deferred = $q.defer();
    var query = new Parse.Query(List);

    query.find({
        success: function(results) {
            deferred.resolve(results);
        },
        error: function(error) {
            deferred.reject(error.message);
        }
    });

    return deferred.promise;
}

// Call the getList function on load
var promise = getLists();
promise.then(function(lists) {
    $scope.lists = lists;
});

So basically, it isn't that Angular doesn't see the response right. You shouldn't have to modify the result from Parse in any way. It's just that you need to use the Parse.Object get method like you would if you were accessing properties of the object, and make sure that you are using a promise so that Angular accesses your query result as it should in the view.

Upvotes: 1

Robert Rowntree
Robert Rowntree

Reputation: 6289

There may be better tools , frameworks to use.

line 188 is the fetch. It automatically loads json for the model into the collection defined at line 47.

Looping over entries in the result from the query on parse is all automated in the framework so that you can save yourself tons of time by learning a relevant framework ( ie backbone ). On backbone/parse you focus on business logic , not manipulating network io and query structures.

'phone in phones' from your question may just be a nested model or nested collection which IMO can be handled by more advanced manipulation of the basic backbone framework.

Upvotes: 0

Related Questions