CODEWITHSUNDEEP
javascriptangularjs
Sumit Chourasia
Sumit Chourasia

Reputation: 2434

angular js pushing data into list is not working

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

Upvotes: 0

Views: 144

Answers (2)

sylwester
sylwester

Reputation: 16498

$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 !!!");
  }

}

Upvotes: 2

vimal1083
vimal1083

Reputation: 8671

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) {

        });

Upvotes: 1

Related Questions