Dynamically update ng-repeat rows on successful parse.com save

Question

I have this AngularJS controller

app.controller('dataCtrl', function($scope) {

    function getData() {
        var myData = Parse.Object.extend('myData');

        var query = new Parse.Query(myData);

        query.find({
            success: function(results) {
                $scope.$apply(function() {
                    $scope.resultData = results.map(function(obj) {
                        return {
                            startDate: obj.get('StartDate'),
                            endDate: obj.get('EndDate'),
                            investment: obj.get('Investment'),
                            format: obj.get('Format'),
                            partner: obj.get('Partner'),
                            purpose: obj.get('Purpose')
                        }
                    });
                });
            }
        });
    }

    getData();

    $scope.refreshData = function() { 
        getData();
    }

    $scope.submit = function() { {

        var myData = Parse.Object.extend('myData');
        var formData = new myData();

        formData.save({
            StartDate:  $scope.startDate,
            EndDate:    $scope.endDate,
            Investment: parseInt($scope.investment),
            Format:     $scope.format,
            Partner:    $scope.partner,
            Purpose:    $scope.purpose
        }, {
            success: function(formData) {
                console.log('Success');
            }
        })
    }
});

Along with <form ng-submit="submit()">

and

<tr ng-repeat="x in resultData">
    <td>{{x.startDate | date: 'yyyy-MM-dd'}}</td>
    <td>{{x.endDate | date: 'yyyy-MM-dd'}}</td>
    <td>{{x.investment}}</td>
    <td>{{x.format}}</td>
    <td>{{x.partner}}</td>
    <td>{{x.purpose}}</td>
</tr>

I can successfully reload new data manually with a button calling the refreshData() function. However I would like the view to update the ng-repeat with the newly created row on a successful form submission. How can I do this?

Answer 1

You can save the data and on save you will get response object. you have to put that response object in model resultData

your response data will come under formData.

success: function(formData) {
    $scope.resultData=formData;
    console.log('Success');
}

Answer 2

you can add the data object in your ng-repeat list when you get success response from your api. it will render the newly added object in your ng-repeat list.

for adding the added object at the top :

jQuery.merge([existed list], {new object});

it will serve your purpose.

Put anything into an array using Array.push().

var a=[], b={};
a.push(b);    
// a[0] === b;

Extra information on Arrays

Add more than one item at a time

var x = ['a'];
x.push('b', 'c');
// x = ['a', 'b', 'c']

Add items to the beginning of an array

var x = ['c', 'd'];
x.unshift('a', 'b');
// x = ['a', 'b', 'c', 'd']

Add the contents of one array to another

var x = ['a', 'b', 'c'];
var y = ['d', 'e', 'f'];
x.push.apply(x, y);
// x = ['a', 'b', 'c', 'd', 'e', 'f']
// y = ['d', 'e', 'f']  (remains unchanged)

Create a new array from the contents of two arrays

var x = ['a', 'b', 'c'];
var y = ['d', 'e', 'f'];
var z = x.concat(y);
// x = ['a', 'b', 'c']  (remains unchanged)
// y = ['d', 'e', 'f']  (remains unchanged)
// z = ['a', 'b', 'c', 'd', 'e', 'f']

hope it will help.

Reference from : How to add an object to an array

Answer 3

You have to append new row object to resultData.

It seems object keys are not matched between AngularJS Scope Object Model and Parse Object Model. Creating Adaptor method will make this task easier.

function createMyDataObjectFromParseObject(parseObject){
    return {
        startDate: parseObject.get('StartDate'),
        endDate: parseObject.get('EndDate'),
        investment: parseObject.get('Investment'),
        format: parseObject.get('Format'),
        partner: parseObject.get('Partner'),
        purpose: parseObject.get('Purpose')

    };
}

Use it in both success method,

Data Fetching Call should be like this,

query.find({
        success: function(results) {
            $scope.$apply(function() {
                $scope.resultData = results.map(function(obj) {
                    return createMyDataObjectFromParseObject(obj);
                });
            });
        }
    });

New Row Creation should be like this,

$scope.submit = function() { {

    var myData = Parse.Object.extend('myData');
    var formData = new myData();

    formData.save({
        StartDate:  $scope.startDate,
        EndDate:    $scope.endDate,
        Investment: parseInt($scope.investment),
        Format:     $scope.format,
        Partner:    $scope.partner,
        Purpose:    $scope.purpose
    }, {
        success: function(newParseObject) {
            var newObj = createMyDataObjectFromParseObject(newParseObject);
            $scope.resultData.push(newObj)
        }
    })
}