Creating a clone of JSON for use as a template

Question

Creating a clone of JSON for use as a template

I am working with a json template that I fill with product data. Here is an example of the json structure:

// product template  
$scope.productAttributes = {
        "Code": null,
        'Attributes':
        {}
    };

When a user inputs product details through a UI and triggers the loadPrices() function, I update the productAttributes like this...

    var loadPrices = function () {
    $scope.entity = {// retrieve form variables};
        $scope.productAttributes.Code = $scope.productID.toUpperCase();
        $scope.productAttributes.Attributes = $scope.entity;
        $scope.productAttributes.Attributes.Term = $scope.productAttributesObj.Term;
        $scope.productAttributes.Attributes.Quantity = 1;          
    };

This is the resulting productAttributes object...

{

"Code": "CON7",    
"Attributes": {        
    "Postcode": "n44er",        
    "rSize": 1000,        
    "Bandwidth": 10,        
    "Term": "36",        
    "Quantity": 1    
}
}

My issue is that every time I call loadPrices, the productAttributes gets overwritten instead of adding new data. I want to achieve a structure like this...

{

"Code": "CON7",    
"Attributes": {        
    "Postcode": "n44er",        
    "Size": 1000,        
    "Bandwidth": 10,        
    "Term": "36",        
    "Quantity": 1    
},
"Code": "CON34",    
"Attributes": {        
    "Postcode": "nww45",        
    "Size": 10,        
    "Bandwidth": 10,        
    "Term": "36",        
    "Quantity": 1    
},
"Code": "CON89",    
"Attributes": {        
    "Postcode": "sw23ed",        
    "Size": 101,        
    "Bandwidth": 101  
}
}

Any suggestions on how I can accomplish this? Any advice would be greatly appreciated.

Additionally, I would like to include an ID field in each "Attributes" object (e.g., "ID": "9e5670fa-2fd7-4858-a667-c99cb5baf0f9"). Is it possible to generate GUIDs using JavaScript or Angular? Thank you!

javascript json angularjs

Answer 1

Answer №1

To convert the variable into an array, simply initialize an empty array and then push objects into it.

$scope.productAttributes = [];

var loadPrices = function () {
  var item = {
    code: $scope.productID.toUpperCase();
    attributes: {
      term: $scope.productAttributesObj.Term,
      quantity: 1
    }
  }

  $scope.productAttributs.push(item);       
};

The structure of your 'item' object can be customized based on your requirements. By pushing these items into the array, you'll achieve the desired outcome.

Answer 2

To convert the variable into an array, simply initialize an empty array and then push objects into it.

$scope.productAttributes = [];

var loadPrices = function () {
  var item = {
    code: $scope.productID.toUpperCase();
    attributes: {
      term: $scope.productAttributesObj.Term,
      quantity: 1
    }
  }

  $scope.productAttributs.push(item);       
};

The structure of your 'item' object can be customized based on your requirements. By pushing these items into the array, you'll achieve the desired outcome.

Answer 3

Answer №2

Give this a shot:

const fetchPrices = () => {
    $scope.data = {/* gathers data from a form*/};
    let myData = {};
    myData.Code = $scope.productID.toUpperCase();
    myData.Attributes = $scope.data;
    myData.Attributes.Term = $scope.productAttributesObj.Term;
    myData.Attributes.Quantity = 1;         

    $scope.productAttributes.push(myData);
};

And make sure to initialize $scope.productAttributes as an Array

$scope.productAttributes = [];

By the way, here's more on manipulating JSON: Manipulating JSON Data with JQuery

Answer 4

Give this a shot:

const fetchPrices = () => {
    $scope.data = {/* gathers data from a form*/};
    let myData = {};
    myData.Code = $scope.productID.toUpperCase();
    myData.Attributes = $scope.data;
    myData.Attributes.Term = $scope.productAttributesObj.Term;
    myData.Attributes.Quantity = 1;         

    $scope.productAttributes.push(myData);
};

And make sure to initialize $scope.productAttributes as an Array

$scope.productAttributes = [];

By the way, here's more on manipulating JSON: Manipulating JSON Data with JQuery

Creating a clone of JSON for use as a template

Answer №1

Answer №2

Similar questions

Sending data from a JavaScript variable to PHP within the same page

getStaticProps will not return any data

Showing undefined or null values in React and JavaScript

What is the best way to incorporate a for loop in order to create animations with anime.js?

Interactive Range Slider for Scrolling Through Div Content

What is the best way to change the number 123456789 to look like 123***789 using either typescript or

Using Codeception's selenium module to wait for JavaScript and Ajax requests to

Error thrown: SyntaxError - Forbidden break statement in AJAX code execution

What is the solution for the error "BREAKING CHANGE: webpack < 5 used to automatically include polyfills for node.js core modules"?

Angular updates location, but browser redirects to incorrect page

Having trouble retrieving the API URL id from a different API data source

The module named "jquery" has not been loaded in this context: _. Please use require() to load it

There seems to be an issue with the Typescript version compatibility in the node_modules folder for the Angular Material table cell component

Is there a way to automatically fetch all pages from a REST API request without having to explicitly state the page number each time?

The accordion seems to be stuck in the open position

Using NodeJS and Express together with Ajax techniques

Tips for Transferring Values Between Multiple Dropdown Menus with jQuery

Error: Attempting to insert or update the "tokens" table violates the foreign key constraint "tokens_userId_fkey" in Sequelize

Display a variety of HTML pages using the md-tab component

Node js Express js token authentication: unraveling the implementation complexities