angular js pushing data into list is not working

Question

I've a Json list which I'm saving in angular js score var

 $scope.jobTemplate = [{ type: "AddInstructions", visible: false, buttonText: "Add Instructions", editableInstructionsList: [{ Number: totalEditableInstruction, Text: "Instruction 1"}] },
    { type: "AddSingleQuestionsList", visible: false, buttonText: "Add Ques. (single Ans.)", singleQuestionsList: [{ Number: totalSingleQuestionList, Question: "What is your gender ?", Options: "Male1;Female2"}] },
    { type: "AddMultipleQuestionsList", visible: false, buttonText: "Add Ques. (Multiple Ans.)", multipleQuestionsList: [{ Number: totalMultipleQuestionList, Question: "What is your multiple gender ?", Options: "Malem1;Femalem2"}] },
    { type: "AddTextBoxQuestionsList", visible: false, buttonText: "Add Ques. (TextBox Ans.)", textBoxQuestionsList: [{ Number: totalTextBoxQuestionList, Question: "Who won 2014 FIFA World cup ?", Options: "text"}] },
    { type: "AddListBoxQuestionsList", visible: false, buttonText: "Add Ques. (ListBox Ans.)", listBoxQuestionsList: [{ Number: totalListBoxQuestionList, Question: "What is your multiple gender ?", Options: "Malem1;Femalem2"}] }
];

I'm pushing the data on click of button as follows

 // single questions..
$scope.InsertSingleQuestionRow = function () {
    totalSingleQuestionList = totalSingleQuestionList + 1;
    var singleQuestionsList = { Number: totalSingleQuestionList, Question: $('#SingleQuestionTextBoxQuestionData').val(), Options: $('#SingleQuestionTextBoxAnswerData').val() };
    $scope.jobTemplate[1].singleQuestionsList.push(singleQuestionsList);
    refreshSingleQuestionsList();
}

though in the UI the newly added item is showing properly but when I'm trying to send the current scope variably data through http post to server, it is not having the latest data.

$scope.ClientCreateTemplateFunction = function () {
    var clientCreateTemplateData =  $scope.jobTemplate;          
    var url = ServerContextPah + '/Client/CreateTemplate';        
    if (true) {
        //startBlockUI('wait..', 3);
        $http({
            url: url,
            method: "POST",
            data: clientCreateTemplateData,
            headers: { 'Content-Type': 'application/json' }
        }).success(function (data, status, headers, config) {
            //$scope.persons = data; // assign  $scope.persons here as promise is resolved here
            //stopBlockUI();

        }).error(function (data, status, headers, config) {

        });
    }
    else {
        $scope.showErrors = true;
        showToastMessage("Error", "Some Fields are Invalid !!!");
    }

}

I tried making global variable too. I've not idea why scope variable is working fine with UI and not working while sending the same data to server through http post. help me.

I've attached one snapshot where in UI it is showing two list while when I console.log the same scope variable it is showing only one list.

enter image description here

What do you mean by not having the latest data? Did you set a breakpoint at the point before firing a http request and found that $scope.jobTemplate isn't up to date? — runTarm
– runTarm, Commented Jul 17, 2014 at 10:42
even after adding third item it shows only 1 item that is manually added in the json at the top. rest whatever we add later is now shown. — Sumit Chourasia
– Sumit Chourasia, Commented Jul 17, 2014 at 12:55
It seems there is not enough information at the moment to figure out what is the problem. Could you try to set up a plunker or jsfiddle, so we can reproduce the problem and help you with a debugging? — runTarm
– runTarm, Commented Jul 17, 2014 at 13:21

sylwester · Accepted Answer · 2014-07-17 10:21:37Z

2

$scope.ClientCreateTemplateFunction = function() {
  var clientCreateTemplateData = $scope.jobTemplate;
  var url = ServerContextPah + '/Client/CreateTemplate';
  if (true) {
    //startBlockUI('wait..', 3);
    $http.post(url, $scope.jobTemplate).then(onSuccess, onError);

    function onSuccess(data, status, headers, config) {
      //$scope.persons = data; // assign  $scope.persons here as promise is resolved here
      //stopBlockUI();
    };   

    function onError(data, status, headers, config) {};

  } else {
    $scope.showErrors = true;
    showToastMessage("Error", "Some Fields are Invalid !!!");
  }

}

answered Jul 17, 2014 at 10:21

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sumit Chourasia Over a year ago

Still having the same issue :(

sylwester Over a year ago

can you please create plunker or jsfiddle ?

vimal1083 · Accepted Answer · 2014-07-17 10:15:21Z

1

You cant send a javascript custom object in post method use jquery's param to convert object to string or convert in to JSON

 $http({
            url: url,
            method: "POST",
            data: $.param( clientCreateTemplateData, true );
            headers: { 'Content-Type': 'application/json' }
        }).success(function (data, status, headers, config) {
            //$scope.persons = data; // assign  $scope.persons here as promise is resolved here
            //stopBlockUI();

        }).error(function (data, status, headers, config) {

        });

answered Jul 17, 2014 at 10:15

vimal1083

8,6916 gold badges36 silver badges50 bronze badges

1 Comment

Yoshi Over a year ago

From the manual: By default, Angular applies these transformations: ... If the data property of the request configuration object contains an object, serialize it into JSON format. So no, jquery is neither needed or recommended.

Collectives™ on Stack Overflow

angular js pushing data into list is not working

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related