What is preventing me from modifying the data in a JSON object?

My task is to update the value "customer.signature", but I am facing an issue with my code. The JSON and HTML seem to be error-free, so the problem lies within my JS code. While "data.signature" updates correctly, "data.customer.signature" does not.

The JSON response from the "Accounts" endpoint:

{
  "signature": "newAccountSignatur",
  "signatureEnabled": true,
  "defaultMsisdn": "08282709909013",
  "httpForwardingAddress": "http://null.dev.to",
  "smtpForwardingAddress": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="79151803180b0c0a39170c1...01"> ]</a>",
  "customer": {
    "signature": "newCustomerSignatur",
    "id": 10339,
    "companyName": "Gerd Webapp Test v2.0.x",
    "diallingCodeId": 43,
  },
}

JS function:

$scope.saveSignature = function () {
  if (AuthService.isAuth()) {
    Accounts.one().get().then(
        function (resultOk) {
          resultOk.data.customer.signature = $scope.newCustomerSig;
          resultOk.data.signature = $scope.newAccountSig;
          $log.d("resultOk: ", resultOk.data);
          resultOk.data.put().then(
              function (resultOk) {
                alert("Saved");
                $log.d("Accountinfo ok: ", resultOk);
                $scope.user = resultOk.data;
              },
              function (resultError) {
                $log.d("Accountinfo error: ", resultError);
                ErrorService.showApiError(resultError);
              }
          );
        }
    );
  }
};

HTML form:

<form name="signature" ng-sub>
    <div>
      <textarea rows="5" cols="40" ng-model="newAccountSig" ng-trim="false" placeholder="{{user.signature}}"></textarea>
    </div>
    <i> Personal Signature </i><br/>
    <div>
      <i> Second Example</i><br/>
      <textarea rows="5" cols="40" ng-model="newCustomerSig" ng-trim="false" placeholder="{{user.customer.signature}}"></textarea>
    </div>
    <i>Information for me: </i>
    <p>Current value in account.signature = </p>
    <span>{{user.signature| stringIfBlank:'-'}}</span>
    <p>Current value in account.customer.signature = </p>
    <span>{{user.customer.signature| stringIfBlank:'-'}}</span>
  </form>

Answer №1

For a practical demonstration, feel free to check out this example: jsbin

var data ={
  "signature": "newAccountSignatur",
  "signatureEnabled": true,
  "defaultMsisdn": "08282709909013",
  "httpForwardingAddress": "http://null.dev.to",
  "smtpForwardingAddress": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb878a918a999e98ab859e7878c58f8e9dc59f84">[email protected]</a>",
  "customer": {
    "signature": "newCustomerSignatur",
    "id": 10339,
    "companyName": "Gerd Webapp Test v2.0.x",
    "diallingCodeId": 43,
  },
};
data.customer.signature="newsign";
console.log(data.customer.signature);
alert(data.customer.signature);

Answer №2

UPDATE There was an issue with the order of nesting that caused a problem. For anyone else facing similar issues, I will keep this here for reference.

   $scope.saveSignature = function () {
      if (AuthService.isAuth()) {
        AccountCustomer.one().get().then(
            function (resultOk) {
              resultOk.data.signature = $scope.newCustomerSig;
              resultOk.data.put().then(
                  Accounts.one().get().then(
                  function (resultOk) {
                    resultOk.data.signature = $scope.newAccountSig;
                    resultOk.data.put().then(
                        function (resultOk) {
                          alert("Saved");
                          $log.d("Accountinfo ok: ", resultOk);
                          $scope.user = resultOk.data;
                        },
                        function (resultError) {
                          $log.d("Accountinfo error: ", resultError);
                          ErrorService.showApiError(resultError);
                        }
                    );
                  }
              ));
            }
        );
      }
    };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The <form> element is giving me headaches in my JavaScript code

Trying to troubleshoot why my HTML pages render twice when I add a form with JavaScript. It seems like the page displays once with the script and again without it. Below is the basic HTML code: <form action="test.php" method="post"> <div class=" ...

Attempting to adjust the width of a text animation loaded with jQuery using Textillate, but encountering difficulties

I found a captivating animation on this website: http://codepen.io/jschr/pen/GaJCi Currently, I am integrating it into my project. #content { position: relative; margin-left: auto; margin-right: auto; width: 1000px; height: 700px; } ...

Tips on making an array readable by JavaScript using Jinja2 and Google App Engine

I'm currently facing an issue with transferring an array from a server to a web page through Jinja2 in Google App Engine. Despite my efforts, I'm struggling to make the array readable by my jQuery code. This is all new to me as it's my first ...

Exploring AngularJS and Jasmine for testing a factory component

I am currently learning about unit testing in AngularJS. I have a factory that I am trying to spy on using Jasmine, but I am having trouble figuring out the correct syntax for the test spec. Below is the code snippet for the factory: app.factory('ass ...

Render multiple checkboxes with values from an array of objects passed as a prop to a child component using a v

I am facing an issue with my Vue components 'Parent' and 'Child'. Each child component has a checkbox with a :checked prop. In the Parent component, I iterate through an array of objects and pass props to the child. Although I can emit ...

Download a complete website using PHP or HTML and save it for offline access

Is there a way to create a website with a textbox and save button, where entering a link saves the entire website like the 'save page' feature in Google Chrome? Can this be done using PHP or HTML? And is it possible to zip the site before downloa ...

What steps should I take to address a problem involving a callback function?

I'm currently working on an application that aims to connect users with friends based on specific questions they answer. However, I keep encountering an error message stating "TypeError [ERR_INVALID_CALLBACK]: Callback must be a function" when the cod ...

Using Angular ng-model with Bootstrap Modal is problematic when attempting to use it multiple times

Imagine you have a table with 10 lists of operators, each with an edit button. When you click on the edit button for operator 1, the modal pops up and displays the operator data in the input field as expected. However, when you close the modal and try to e ...

exit out of React Dialog using a button

I have a scenario where I want to automatically open a dialog when the screen is visited, so I set the default state to true. To close the dialog, I created a custom button that, when clicked, should change the state to false. However, the dialog does no ...

Jest is having trouble recognizing a custom global function during testing, even though it functions properly outside of testing

In my Express app, I have a custom function called foo that is globally scoped. However, when running Jest test scripts, the function is being recognized as undefined, causing any tests that rely on it to fail. This is declared in index.d.ts: declare glob ...

Troublesome issue with the Focus() function in JavaScript

I'm having trouble setting the focus on a textbox with the id "txtCity." document.getElementById("txtCity").focus(); Any suggestions on how to make it work? ...

What is the proper file format for a form action in CSS?

What I Currently Have: In my Index.html file, there are a total of 4 form elements including text fields and a dropdown. Upon submission by the user, the data is processed in confirm.html using a separate JavaScript file for formatting before being displa ...

Here is a compilation of Json data entries

Within my collection of JSON records, there are various entries such as: [{“age”:27,”lastname”:”Robert “,”firstName”:”Rob”,”company”:”abc”}, {“age”:27,”lastname”:”Ashok “,”firstName”:”Bob”,”company”:” ...

Can I Select a Specific Node in React Component with Unique Behavior Upon Reuse?

Seeking advice on how to uniquely target a specific node within my react reusable component in order to perform operations on it multiple times independently. I will be rendering this reusable component several times on the same page in my App.js. Here is ...

Neglecting to inquire with OpenLibrary

I'm looking to create a query for OpenLibrary's RESTful API that will achieve the following: Filter the book list based on the first five characters of the title Retrieve the book's title, author, publication date, description, and a link ...

Leveraging $pristine in AngularJS for Form Validation

My form utilizes angular validation, but I want to disable it upon page load. Below is a simplified version of my form: <form ng-submit="vm.submit()" name="form" novalidate> <input class="form-control" ng-model="vm.userName" required /> ...

Learn the process of eliminating a class utilizing this JavaScript function

This script is designed to identify and manipulate elements with the class menu-option-set. When an element within this class is clicked, it adds the class "selected" to that specific element while removing it from all others in the list. My goal is to en ...

The response from $http.get is not defined

Currently, I am working on the front end of a project using HTML, while utilizing Python for the back end. To handle communication between the two, I have integrated AngularJS. The challenge I am currently encountering pertains to retrieving responses fro ...

Attempting to minimize the repetition of code in Redux by implementing some utility functions

Is there a potential issue with the method I'm attempting in this URL: The concept involves altering only the actions file when introducing a new action. One improvement I am considering is recursively merging the status passed from the actions with ...

Choose a collection of elements and encase them within a <div> tag

I am currently working on creating a greasemonkey script for a webpage that has a rather challenging structure. My goal is to show and hide different entries, but the content is formatted like this: <a name="first"/> <h3>First</h3> Some ...