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

Exploring the possibilities of integrating jQuery into Firefox extensions

I noticed that while my shareService is effectively sending values in Angular 2, I encounter an issue where my other components are displaying default values instead

Leveraging the arguments object within function declarations

Updating padding through local storage does not function as intended

Issues with retrieving $_POST values from a select form in PHP

Which approach is more impactful: consistently sending an ajax request or breaking down the result within a function?

When registering the onHardwareBackButton event in Ionic, the back button continues to successfully navigate to the previous page

Issue with the transmission of FormData and string data to PHP

Retrieving the Selector Value during a Change Event

"Encountered npm error: JSON input ended unexpectedly" while trying to install express-mysql-session"

Can the server-side manipulate the browser's address bar?

Do we need to employ strict mode when utilizing specific ES6 functions in Node.js?

Modify section background color for every iteration in an image carousel

The CORS policy is preventing the AJAX request from functioning properly on localhost

I am facing an issue where the HTML button is not properly interacting with the JavaScript function

`AngularJS Voice Recognition Solutions`

Does Angular's compile function operate asynchronously?

Auto-fit HTML Webpage Resizer Simplified

Emulating Data in Angular 2 Using Configuration Similar to Ember Mirage

Tips for effectively utilizing "Session" in jQuery