{"id":2156,"date":"2022-08-30T15:22:31","date_gmt":"2022-08-30T15:22:31","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/01\/04\/how-to-access-json-return-values-in-angular-js-action-success-callback-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:22:31","modified_gmt":"2022-08-30T15:22:31","slug":"how-to-access-json-return-values-in-angular-js-action-success-callback-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/how-to-access-json-return-values-in-angular-js-action-success-callback-collection-of-common-programming-errors\/","title":{"rendered":"How to access json return values in angular.js action success callback-Collection of common programming errors"},"content":{"rendered":"

I’m trying to make a post call using resources from angular.js and adding a success and error callback.<\/p>\n

wbsModule.factory('gridData', function($resource) {\n    \/\/define resource class\n    var root = {{ root.pk }};\n    var csrf = '{{ csrf_token }}';\n    return $resource('{% url getJSON4SlickGrid root.pk %}:wpID', {wpID:'@id'},{\n            get: {method:'GET', params:{root : root }, isArray:true},\n            update:{method:'POST', headers: {'X-CSRFToken' : csrf }},\n      });\n});\n<\/code><\/pre>\n
I’m calling the update action like this:<\/p>\n
args.item.$update([], successUpdateCallback, errorUpdateCallback);\n<\/code><\/pre>\n
where I followed this part of the docs:<\/p>\n
non-GET instance actions: instance.$action([parameters], [success], [error])\n<\/code><\/pre>\n
The server returns json like this if an error occurs:<\/p>\n
jsonReturn = [{'error' : \"Oops.. a problem occured. We could not save your last change in the highlighted row: \"}]\n        jsonReturn.append({'wp_id' : wp_id})\n        try:\n            for key, value in wpForm.errors.iteritems():\n                jsonReturn.append({\"form_errors\" : \"
\" + str(value)})\n        except Exception, e:\n            print e\n        return HttpResponse(json.dumps(jsonReturn, indent=4), mimetype=\"application\/json\", status=400)\n<\/code><\/pre>\n
For the error callback I am able access the error messages like this:<\/p>\n
     function errorUpdateCallback(result){\n            console.log(result.data);\n            error = result.data[0].error;\n            wp_id = result.data[1].wp_id;\n            form_errors = result.data[2].form_errors;\n            }\n        };\n<\/code><\/pre>\n
But when I try to do the same for the success function I’m getting this error, which is thrown before entering the successUpdateCallback:<\/p>\n
'undefined' is not a function (evaluation 'a.push(U(b[c]))')\n http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.0.2\/angular.min.js\n<\/code><\/pre>\n
Where I create the json the same as in the error case at the server:<\/p>\n
jsonReturn = [{'message' : \"Successfull update.\"}]\nreturn HttpResponse(json.dumps(jsonReturn, indent=4), mimetype=\"application\/json\", status=200)\n<\/code><\/pre>\n
and parsing the success callback the same as the error callback:<\/p>\n
        function successUpdateCallback(result){\n            console.log(\"in suc. update\");\n            console.log(result);\n            message = result.data[0].message;\n        };\n<\/code><\/pre>\n
Whereas when I return an empty json object I do not get this error and the successUpdateCallback is entered, printing “in suc.update” to the console:<\/p>\n
jsonReturn = []\nreturn HttpResponse(json.dumps(jsonReturn, indent=4), mimetype=\"application\/json\", status=200)\n<\/code><\/pre>\n
    \n
  1. \n
    For future reference:<\/p>\n
    Angular is expecting for a successful post call that the server responds with the json representation of the resource for which we called $update or $save.<\/p>\n
    I found it here. Hidden in a comment \ud83d\ude42<\/p>\n
     card.$save();\n \/\/ POST: \/user\/123\/card\/456 {id:456, number:'1234', name:'J. Smith'}\n \/\/ server returns: {id:456, number:'1234', name: 'J. Smith'};\n<\/code><\/pre>\n
    Therefore I’m returning the json representation of the resource from the server and it works as expected.<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2014-01-04 02:48:40. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    I’m trying to make a post call using resources from angular.js and adding a success and error callback. wbsModule.factory(‘gridData’, function($resource) { \/\/define resource class var root = {{ root.pk }}; var csrf = ‘{{ csrf_token }}’; return $resource(‘{% url getJSON4SlickGrid root.pk %}:wpID’, {wpID:’@id’},{ get: {method:’GET’, params:{root : root }, isArray:true}, update:{method:’POST’, headers: {‘X-CSRFToken’ : csrf […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2156","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2156"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2156\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}