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

What is the best way to upload an image BUFFER to a website using puppeteer?

What I have learned to do: Save an image file from a source like imgur as a buffer and download it to disk Display an image on a page by uploading it from disk using elementHandle.uploadFile(path) However, this method only works locally on my machine. My ...

Developing custom validation with Angular 1.5 based on external data inputs

Is it possible to create a custom validation directive in Angular 1.5 that takes into account values other than the bounded one? For example: I have an array of objects of type Type1 with fields Field1, Field2, and Field3. Using ng-repeat, I display the ...

Displaying subsets of data based on the identifier of the primary array

In my JSON file, I have an array containing various categories and their respective subcategories. { "Women": [ { "id" : 1, "name" : "See All", &q ...

Root functionality or Angular service

I am considering a restructuring of my code to enable sharing a dialog page among different controllers. Each controller should have the ability to open the same dialog. I am unsure whether to implement the dialog as a service or a directive in order to ma ...

Steps for Building and Exporting a Next.js Project Without Minification and Optimization

Is there a way to build and export a Next.js project without minifying and optimizing the output files? ...

Is there a way for me to access this user's data with just a click?

When selecting a user from the list, more information should be displayed on the right. However, currently, a random user is being shown. Should I retrieve its index and compare them? Assistance is needed to clarify this issue and locate the necessary info ...

Parsing Json with Bearer Token in Ruby: A Step-by-Step Guide

After completing a Bootcamp, I am now venturing into projects and job applications. I recently received a test for a potential job that has me feeling unsure of how to approach it. Currently, I am pondering over how to tackle this test. The task at hand i ...

Having difficulties with implementing the throw await syntax in an async express handler in Node.js

const express = require("express"); const expressAsyncHandler = require("express-async-handler"); const app = express(); const func = async () => { return false; }; app.get( "/", expressAsyncHandler(async () => ...

How to successfully implement ng-show with Html5's <dialog> tags

It's incredible how simple Html5 dialogs are. It feels like they should have been here 15 years ago! I'm having trouble getting ng-show to work with dialogs. Any tips on how to make it happen? <!DOCTYPE html> <html ng-app="project"> ...

Identify 404 errors in multi-file routes with Express

Recently, I've been diving into using Express and I'm facing some challenges with detecting 404 errors. In my main file app.js, I launch the server and specify different files to handle various requests. For instance: const app = express(); app ...

Expand the table in the initial state by using CSS to collapse the tree

I am struggling to collapse the tree view and need assistance. Below is the code snippet I've added. My goal is to have each node in the tree view initially collapsed and then expand a particular node on user interaction. For example, when I execute ...

Incorporate this form created externally onto my website

I have been working on my website and I am looking to incorporate a form that opens up once the login button is clicked. This form was generated using an online form builder which provides an embed code for seamless integration onto websites. Below, you wi ...

Find and extract a specific data set that is repeated in the field multiple times

Currently, I am in the process of developing a game server and have a player inventory that is stored as a json field. My goal is to create a query that specifically retrieves two particular data sets within the field, however, these data sets are repetiti ...

Mysterious source utilizing leafletView for showcasing popups within the Angular Leaflet Directive

I've been attempting to implement a pop-up window on an Angular Leaflet map using Prune Cluster, but I keep running into an error stating that 'leafletView' is an unknown provider. Despite following the examples provided on this page, https: ...

Problem with JSON in Spring Boot REST API

Within my spring boot rest application, there is a controller containing the method below. This method utilizes hibernate to retrieve data from an Oracle DB. The problem arises when I call this service, as it returns a HTTP ERROR 500. Strangely, no error ...

Click the link to find the JSON node that corresponds to the onclick event

After parsing JSON, the JS code below is returning a list of movie titles for me. Each movie title node contains additional attributes and values that are not currently being displayed. My goal is to have the other values in that specific node displayed wh ...

best way to eliminate empty p tags and non-breaking spaces from html code in react-native

How can I clean up dynamic HTML content by removing empty <p> tags and &nbsp? The whitespace they create is unwanted and I want to get rid of it. Here's the HTML content retrieved from an API response. I'm using the react-native-render ...

An elaborate warning mechanism in Redux-observable that does not trigger an action at the conclusion of an epic

I'm currently working on implementing a sophisticated alert system using redux and redux-observable. The requirements are: An action should request an alert: REQUEST_ALERT An action should create an alert and add an ID: SET_ALERT (handled in the ep ...

What steps are needed to pass an additional parameter to the onMouseDown function in ReactJS?

The TypeScript function listed below demonstrates the functionality: const handleMouseDownHome = (e: any) => { // Only activates when scroll mouse button is clicked if (e.button === 1) { window.open("/", "_blank", " ...

When any part of the page is clicked, the data on the Angular page will automatically

Clicking the mouse anywhere on the page, even in a blank spot, causes the data array to resort itself. I understand that clicking may trigger a view change if an impure pipe is set, but I have not used one. So I am puzzled because my development testing ...