Question 178233 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can Jquery map a jsonobject to a Class w/ multiple key/value pairs?

I have an object like this , i want to map it to a class object Stock as given below .

Input Object

        var inputJson = [{
            "HS": "   ",
            "__EMPTY": 1,
            "__EMPTY_1": "    Pcs."
        },
        {
            "HS": " RAS222PCAIBA",
            "__EMPTY": 1,
            "__EMPTY_1": "    Pcs."
        },
        {
            "HS": "     SRK20CSS-S6/A1.6T",
            "__EMPTY": -4,
            "__EMPTY_1": "    Pcs."
        }]

Class

        class Stocks {
          model;
          quantity;
          type;
          constructor(data) {
            Object.assign(this, data);
          }
        }

i am trying to get the refined class object in an array like this

    var completeStock = [] ; 
       $.each(inputJson, function( index, value ) {
         completeStock.push(new Stocks(value));
      });

But this is adding the object keys rather than mapping the first object key to model , second key to Quantity and ther third key to type. How can i achieve this .

Tags:

3

Answers


  1. 0

    You can modify your class constructor in the following way:

    class Stocks {
  model;
  quantity;
  type;
  constructor(data) {
    this.model = data.HS;
    this.quantity = data.__EMPTY;
    this.type = data.__EMPTY_1.trim();
  }
}


var inputJson = [{
    "HS": "   ",
    "__EMPTY": 1,
    "__EMPTY_1": "    Pcs."
},
{
    "HS": " RAS222PCAIBA",
    "__EMPTY": 1,
    "__EMPTY_1": "    Pcs."
},
{
    "HS": "     SRK20CSS-S6/A1.6T",
    "__EMPTY": -4,
    "__EMPTY_1": "    Pcs."
}];

var completeStock = [];
$.each(inputJson, function(index, value) {
  completeStock.push(new Stocks(value));
});

console.log(completeStock);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Login or Signup to reply.
  2. 0

    You can just extract out the values from object and assign them to the class properties like below

    var completeStock = [];
$.each(inputJson, function(index, value) {
  const {HS: model, __EMPTY: quantity, __EMPTY_1: type} = value;
  completeStock.push(new Stocks({ model, quantity, type }));
});
console.log(completeStock)
    Login or Signup to reply.
  3. 0

    You need to clearly define the mappings in the constructor.
    Your constructor will only work with the same property names of the inputJson.

    Modify your constructor like this, Now we have defined clear mappings in the constructor.

     class Stock {
          model;
          quantity;
          type;
          constructor(data) {
                         this.model = data.HS;
                            this.quantity = data.__EMPTY;
                            this.type = data.__EMPTY_1
          }
        }

    Now you will be able to map them correctly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search