Transferring object attributes to a different object in AngularJS

Can someone guide me on the best method for copying object properties from one object to another using AngularJS/JavaScript?

Here is an example of the JSON object I need help with:

{  
   "application":{  
      "number":"323-23-4231",
      "amount":"234.44",
      "ref_name":"Thomas Edison"
   },
   "borrower":{  
      "prefix":"Mr",
      "first_name":"Eric",
      "middle_name":"E",
      "last_name":"Schulz",
      "date_of_birth":"09/29/1975",
      "email_address":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0cdd9c5cdc1c9cce0e8eff4ede1e9ec8ee3efed">[email protected]</a>",
      "phones":[  
         {  
            "number":"(555)555-5555",
            "type":"Mobile"
         }
      ]
   }
}

I am aiming to transform the above JSON object into a new structure that looks like this:

{  
   "number":"323-23-4231",
   "amount":"234.44",
   "ref_name":"Thomas Edison",
   "prefix":"Mr",
   "first_name":"Eric",
   "middle_name":"E",
   "last_name":"Schulz",
   "date_of_birth":"09/29/1975",
   "email_address":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cda0b4a8a0aca4a18d858299808c8481e38e8280">[email protected]</a>",
   "phones":[  
      {  
         "number":"(555)555-5555",
         "type":"Mobile"
      }
   ]
}
javascriptjsonangularjs

Answer №1

If you happen to have the original object stored in a variable named oldObj, you could achieve something similar to this (although it hasn't been tested):

newObj = {}
newObj = angular.extend(newObj, oldObj.application)
newObj = angular.extend(newObj, oldObj.borrower)

There are numerous methods available for copying properties from one object to another within various frameworks. For example, Angular comes equipped with the built-in angular.extend, which can be further explored here

You could also accomplish this task without relying on any advanced techniques:

newObj.number = oldObj.application.number
newObj.amount = oldObj.application.amount
newObj.ref_name = oldObj.application.ref_name
newObj.prefix = oldObj.borrower.prefix
...

However, doing so manually would probably not be the most efficient approach :)

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

Error in Adding Items to React To-Do List

As I work on creating a React todo app following a tutorial, I have encountered an issue. Despite having components and context files set up, the addItem function does not render the item and date into the todo list when the 'Add todo' button is ...

javascriptnode.jsreactjs

Display a single item using Jquery when clicking on an element with the same class

I'm relatively new to JQuery/Javascript scripting and I'm having some difficulty. How can I display one item with the same class without affecting the other items? Here is my code: $(function() { $('.embedContainer > .myPosterImage& ...

javascripthtmljquerycssscripting

Creating a Json autocomplete feature for category

Looking to implement categorized jquery autocomplete with Rails. Successfully retrieved JSON response: ["Air Canada to appeal Quebec court ruling on Aveos","First Nations meeting with PM in jeopardy","Neanderthals, humans may have missed each other","New ...

jqueryruby-on-railsrubyjsonruby-on-rails-3

"Troubleshooting a blank screen issue during JSON data retrieval on an Android device

I have a scenario where I am retrieving a large JSON response from a specific URL. The issue is that when the response is being fetched, the application displays a blank or black screen. To mitigate this problem, I would like to implement a ProgressDialog ...

androidjsonandroid-listview

What methods are available for drawing on an HTML canvas using a mouse?

I am facing two challenges: how can I create rectangles using the mouse on an HTML canvas, and why is my timer not visible? Despite trying various code snippets, nothing seems to be working. Grateful for any help! HTML: <!DOCTYPE html> <html lan ...

javascripthtmlhtml5-canvas

Utilizing Json and Apex: Setting values for elements within the Json Array

I am facing a challenge with my apex code that defines the JSON structure. I need some guidance on how to assign values to the string fields within the JSON using Apex. The JSON includes an array (PackageData) which holds the fields where the values should ...

jsonsalesforceapex

Navigating a JSON array with Python: A guide to parsing

Here is my JSON array and I need to create a new string based on it. I wrote a simple function to try returning a value from the JSON data, but I encountered an issue with Error was expected string or buffer def blah(myjson): data = json.loads(myjson ...

pythonjson

Is there a Javascript tool available for creating a visual representation of the correlation between items in two separate

Does anyone have recommendations for an HTML/JavaScript/browser-based component that can map items in one list to another? Imagine a scenario where there is a list of items on the left-hand side and another list on the right, with the ability to click on a ...

javascriptjqueryjquery-plugins

Prevent deletion of already uploaded images in Blueimp by disabling the delete button

After using the blueimp upload script to upload files, I noticed that the file information is saved in a data table along with the upload timestamp. However, when I go to edit the form, the files reappear. The simple task I want to achieve is disabling th ...

javascriptphpjqueryajaxblueimp

Encountering issues when attempting to create a service worker in a Vue.js application using Workbox's injectManifest feature

I'm attempting to utilize vue.js's capabilities for progressive web apps by creating a customized service worker using workbox. However, every time I try to build the app, I encounter the following error: AssertionError [ERR_ASSERTION]: swSrc mus ...

javascriptvue.jsservice-workerprogressive-web-appsweb-notifications

What might be causing the issue in the build process of my next.js project?

**Why is my Node.js YAML file causing an error?** name: Node.js CI on: push: branches: [ "main" ] pull_request: branches: [ "main" ] jobs: build: runs-on: ubuntu-latest strategy: matrix: node-ver ...

javascriptnext.jsbuild

Unable to use OrbitControls with Node 12's ES6 import functionality

Currently, I am working with Node 12 (experimental-modules) and using npm for three.js. However, I'm facing issues with Imports when trying to include OrbitControls.js in my project. My index.js file is set as "script: module". Unfortunately, none of ...

javascriptnode.jsecmascript-6three.jses6-module-loader

Vue 3 Options API makes handling empty this.$refs easy

Previously in Vue 2, I was able to retrieve a property from component children (rendered within a v-for loop) using this.$refs along with a dynamically-assigned :ref attribute. However, this code no longer works in Vue 3. Upon logging out this.$refs, I no ...

javascriptvue.jsvuejs3

What methods are available to incorporate arithmetic when defining a style attribute?

Is there a way to achieve arithmetic operations in CSS, like calculating margin-left: -60px + 50% of the width of the parent div? I'm eager to find a solution, whether it involves JavaScript or any other method. Any help would be greatly appreciated. ...

javascripthtmlcss

Tips for incorporating a Spinner-GIF ahead of complete loading of ng-include

I'm in the process of dynamically loading HTML partials from the server using a div layer. The template variable is updated when a navigation link is clicked. <div id="ajaxwrapper" ng-include="template"> </div> Everything is functioning ...

angularjsajaxspinner

Learn the process of dynamically updating the source of an HTML5 video

Currently, I am working on a project that involves dynamically loading multiple videos onto a webpage. The structure of my HTML is quite straightforward - it consists of a single video tag. <video controls preload width="520" height="350" id="video"> ...

javascriptjqueryhtml5-video

What is the best method for securing my API key within the script.js file while utilizing dotenv?

My goal is to conceal my API key using dotenv. Interestingly, when I replace require('dotenv').config(); with my actual API key in the code as apiKey: process.env.API_KEY, it works fine despite not using process.env.API_KEY. I made sure to inst ...

javascripthtmlapiapi-keydotenv

"My discord.js bot seems to be sending multiple GIFs in one go instead of just one. Any ideas on how to

Can anyone assist me with a Discord bot command issue? I'm trying to make a command that sends a random Kirby gif using the Giphy API, but it keeps sending multiple gifs instead of just one. Here is the code snippet: client.on('message', mes ...

javascriptdiscorddiscord.jsgiphy-api

Issue occurred while trying to set the value from an API call response in the componentDidMount lifecycle method

There is a boolean variable disableButton: boolean; that needs to be set based on the response received from this API call: async getDocStatus(policy: string): Promise<boolean> { return await ApiService.getData(this.apiUrl + policy + this.myEndpo ...

javascripttypescript

Can onerror be triggered on an HTML Image onload event?

Having an html image labeled as follows: <image src = 'image.png' onerror = "handleError(this)" onload = "handleLoad(this)"> function handleError(n){ getFirstChild(n.parentNode).style.display = '',n.style.display ...

javascripthtmlasp.netonloadonerror