I want to convert object literal list from JSON file to particular class object list in javascript, I tried but not able to achieve, can anybody knows how to achieve this in ES5/ES6, since Im trying this in angular 2:

Here is my JSON file:

{"list":[
    {"name":"ABC", "cost":200},
    {"name":"LMN", "cost":100},
    {"name":"POP", "cost":200},
    {"name":"OEE", "cost":560},
    {"name":"WWO", "cost":450},
    {"name":"ERR", "cost":150},
    {"name":"OWE", "cost":250}
]}

Product Class :

export class Product{
static newId:number = 0;

constructor(public name: string = "", public cost: number = 0,public id: number = 0){
    this.id = ++Product.newId;
}};

Here "list" array contains list of object literals of type Object, I just want to convert all of them into the object of type "Porduct"

Here is what im tring to do:

this.appService.getProductList().subscribe(
    data => this.productList = data.list,
    error => console.error("error"),
    () => console.log("GET done.")
  );

Here "appService" is http service, "getProductList()" is service method returns observable, and "this.productList" is an array, I want to fill this array with object of type Product rather simple "Object". Please help me in this.

I want to convert object literal list from JSON file to particular class object list in javascript, I tried but not able to achieve, can anybody knows how to achieve this in ES5/ES6, since Im trying this in angular 2:

Here is my JSON file:

{"list":[
    {"name":"ABC", "cost":200},
    {"name":"LMN", "cost":100},
    {"name":"POP", "cost":200},
    {"name":"OEE", "cost":560},
    {"name":"WWO", "cost":450},
    {"name":"ERR", "cost":150},
    {"name":"OWE", "cost":250}
]}

Product Class :

export class Product{
static newId:number = 0;

constructor(public name: string = "", public cost: number = 0,public id: number = 0){
    this.id = ++Product.newId;
}};

Here "list" array contains list of object literals of type Object, I just want to convert all of them into the object of type "Porduct"

Here is what im tring to do:

this.appService.getProductList().subscribe(
    data => this.productList = data.list,
    error => console.error("error"),
    () => console.log("GET done.")
  );

Here "appService" is http service, "getProductList()" is service method returns observable, and "this.productList" is an array, I want to fill this array with object of type Product rather simple "Object". Please help me in this.

• javascript
• angular

4 Answers 4

Late answer, but wanted to add one aspect:

While in most situations creating a new object with the old object as parameter(s) is definitely the best and safest, it's also possible to modify the prototype of an existing object, to effectively make a simple {"name":"ABC", "cost":200} into a Product.

Example:

class Greeter {
  constructor(public name: string) {
  }

  hello() {
    console.log(`Hello ${this.name}!`);
  }
}

const obj = {name: 'World'}; // Normal object literal which is not a Greeter instance

obj.hello(); // Error
Object.setPrototypeOf(obj, Greeter.prototype); // Now obj is a Greeter instance
obj.hello(); // Prints 'Hello world!'

If using TypeScript, you would also either have to cast obj into a Greeter afterwards or just use the fact that Object.setPrototypeOf returns the given object typed using the given Prototype:

Object.setPrototypeOf(obj, Greeter.prototype); 
const greeter = obj as Greeter;

or, simpler:

const greeter = Object.setPrototypeOf(obj, Greeter.prototype); 

Now obj is a Greeter instance (but still of type{name: string} so you cannot do obj.hello()), but greeter is of type Greeter.

> obj.hello();
error TS2339: Property 'hello' does not exist on type '{ name: string; }'

> greeter.hello();
Hello World!

Obviously, this might be risky and should only be done with care, since you're asserting that an object not created with Greeter's constructor is a patible object having the same properties etc. So in most cases this should probably be avoided, but it's definitely possible.

In your getProductList() in the .map call just transform it to a "real" product:

return this.http.get(...)
           .map(res => res.json().map(p => new Product(p.name, p.cost)));

I wouldn't do it in the subscribe because as a consumer of the getProductList() I'd assume to actually already get Products and not just JS objects. The consumer doesn't need to know anything about the implementation detail.

I guess this is what you want:

  this.appService.getProductList().subscribe(
    data => this.productList = data.list.map(item => new Product(item.name, item.cost)); 
    error => console.error("error"),
    () => console.log("GET done.")
  );

this.appService.getProductList().subscribe(
    data => this.productList = data.list.map( (listItem) => new Product(listItem),
    error => console.error("error"),
    () => console.log("GET done.")
  );