如何从 Json 数据中获取属性值

Question

I am getting the below Json data by calling API in Angular.

    {
"Product":[
    { "name":"Laptop", "sale":3000, "company":"hp", "date":"12 Oct"},
    { "name":"Mouse", "sale":300, "company":"lenovo", "date":"13 Oct"},
    { "name":"Laptop", "sale":5000, "company":"dell", "date":"12 Oct"},
    { "name":"Printer", "sale":4000, "company":"lenovo", "date":"14 Oct"},
    ]
}

how we can convert the above JSON data into below key:value format. Here key is the product name and value is the total sale of that product.

{Laptop:8000,mouse:300,Printer:4000}

Answer 1

You can use Object.keys like the following:

result = {};
items = {
  Product: [
    { name: "Laptop", sale: 3000, company: "hp", date: "12 Oct" },
    { name: "Mouse", sale: 300, company: "lenovo", date: "13 Oct" },
    { name: "Laptop", sale: 5000, company: "dell", date: "12 Oct" },
    { name: "Printer", sale: 4000, company: "lenovo", date: "14 Oct" }
  ]
};

 ngOnInit(): void {
   Object.keys(this.items.Product).map(key => {
     const name = this.items.Product[key].name;
     const sale = this.items.Product[key].sale;
     if (this.result.hasOwnProperty(name)) {
       this.result[name] = this.result[name] + sale;
     } else {
       this.result[name] = sale;
     }
   });
   console.log(this.result); // { "Laptop": 8000, "Mouse": 300, "Printer": 4000 }
 }

Stackblitz here !

Answer 2

const item = { "name":"Laptop", "sale":3000, "company":"hp", "date":"12 Oct"}

const converted = {[item.name]: item.sale};

now the array:

const items = array.map( item => ({[item.name]: item.sale}));

// items -> [{Laptop: 8000}, {Mouse:300}]

Answer 3

Firstly , create a model/vo class for example:

export class ProductModel() { 
 name?: string; 
 sale?: number; 
 company: string; 
 date: Date
}

Secondly , create an injectable service class for example:

 @Injectable()
 export class ProductService() {
   constructor(private http: Http) {}

   getProducts(): ProductModel[] { 
   return this.http.get<ProductModel[]>("YOUR URL", "YOUR HEADERS")} }

Finally , add to providers this service in.module.ts or component's.ts file and call in the component's.ts for example:

 export class Product implements Oninit() {
  data: ProductModel[]
  constructor (private productService: ProductService) {}

  ngOninit() { this.initProducts(); }

  initProducts() {
   this.data = this.productService.getProducts() }
 }

This is the way that you can use from JSON to local key:value format in Angular 2+.

I hope that I could help you. Sorry for my code format, this is my first stackoverflow comment.