Getting only a part of values from array of JSON objects in angular

Question

Json which is returning from web service is

[
    [
        {
            "strOrderType": "New",
            "strOrderCode": "order006.1",
            "strDescription": "Automation Testing",
            "strStarts": "02 Jun 2020",
            "strEnds": null,
            "strOrderBy": "mnoo1",
            "strContractType": "Time",
            "intDocument": -1
        },
        {
            "strOrderType": "New",
            "strOrderCode": "order987.1",
            "strDescription": "Automation Testing",
            "strStarts": "02 Jun 2020",
            "strEnds": null,
            "strOrderBy": "mnoo1",
            "strContractType": "Time",
            "strNextAction": "-> Save order data <br />-> Mark Final Order Document & SignOff <br /> -> Create project",
            "intDocument": -1
        },
        {
            "strOrderType": "New",
            "strOrderCode": "order974.1",
            "strDescription": "Automation Testing",
            "strStarts": "02 Jun 2020",
            "strEnds": null,
            "strOrderBy": "mnoo1",
            "strContractType": "Time",
            "strNextAction": "-> Save order data <br />-> Mark Final Order Document & SignOff <br /> -> Create project",
            "intDocument": -1,

        },
        {
            "strOrderType": "CR",
            "strOrderCode": "order892.10",
            "strDescription": "Test",
            "strStarts": "01 Aug 2020",
            "strEnds": null,
            "strOrderBy": "mnoo2",
            "strContractType": "fixed",
            "strNextAction": "-> Save order data <br />-> Mark Final Order Document & SignOff <br />",
            "intDocument": -1
        },
        {
            "strOrderType": "CR",
            "strOrderCode": "order892.11",
            "strDescription": "Test",
            "strStarts": "01 Aug 2020",
            "strEnds": null,
            "strOrderBy": "mnoo2",
            "strContractType": "fixed",
            "strNextAction": "-> Save order data <br />-> Mark Final Order Document & SignOff <br />",
            "intDocument": -1
        },
        {
            "strOrderType": "CR",
            "strOrderCode": "order892.12",
            "strDescription": "Test",
            "strStarts": "01 Aug 2020",
            "strEnds": null,
            "strOrderBy": "mnoo2",
            "strContractType": "fixed",
            "strNextAction": "-> Save order data <br />-> Mark Final Order Document & SignOff <br />",
            "intDocument": -1
        },
        {
            "strOrderType": "CR",
            "strOrderCode": "order892.13",
            "strDescription": "Test",
            "strStarts": "01 Aug 2020",
            "strEnds": null,
            "strOrderBy": "mnoo2",
            "strContractType": "fixed",
            "strNextAction": "-> Save order data <br />-> Mark Final Order Document & SignOff <br />",
            "intDocument": -1
        },
        {
            "strOrderType": "CR",
            "strOrderCode": "order892.14",
            "strDescription": "Test",
            "strStarts": "01 Aug 2020",
            "strEnds": null,
            "strOrderBy": "mnoo2",
            "strContractType": "fixed",
            "strNextAction": "-> Save order data <br />-> Mark Final Order Document & SignOff <br />",
            "intDocument": -1
        }
    ]
]

Now i need only 4 values OrderType,strOrderCode,strDescription,strOrderBy,intDocument

OrderModel.ts

export class OrderModel{
    Type: string
    OrderCode: string
    OrderBy: string
    Document: number
    Description: string
}

service

export class InboxService {

  constructor(private http:HttpClient) { }

  getFAInboxDetails(): Observable<any>{
    return this.http.get<any>("http://localhost:61303/api/Inbox/FA");
  }
}

this data kind of inbox in dashboard should be displayed when the component loaded.

I tried as below, but I couldn't get the expected result.

component

export class FinasstInboxComponent implements OnInit {

  constructor(private inbox: InboxService) { }
  filter: string
  faInboxlst : OrderModel[]=[];

  ngOnInit(): void {
    this.inbox.getFAInboxDetails().subscribe(
      jsonData=>{
        this.faInboxlst= jsonData;
        console.log(this.faInboxlst);
      }
    )
  }
}

need a solution how can I extract the part of JSON values from JSON list contains a lot of unnecessary things

score 0 · Accepted Answer · answered Jun 05 '20 at 18:50

There isn't any direct way to convert the type. You might have to loop the array manually

export class OrderModel {
  Type: string;
  OrderCode: string;
  OrderBy: string;
  Document: number;
  Description: string;

  constructor(
    private type: string,
    private code: string,
    private orderBy: string,
    private document: number,
    private description: string
  ) {
    this.Type = type;
    this.OrderCode = code;
    this.OrderBy = orderBy;
    this.Document = document;
    this.Description = description;
  }
}

export class FinasstInboxComponent implements OnInit {
  ...

  ngOnInit(): void {
    this.inbox.getFAInboxDetails().subscribe(
      jsonData => {
        jsonData[0].forEach(data => {
          this.faInboxlst.push(new OrderModel(
            data['OrderType'],
            data['strOrderCode'],
            data['strDescription'],
            data['strOrderBy'],
            data['intDocument'],
          ));
        });
        console.log(this.faInboxlst);
      }
    );
  }
}

thanks this worked for me, in curiosity cant we use the Map function to achieve the same? — Vijayashankar Aruchamy, Jun 06 '20 at 05:46
Yes you could. `map` applies the operation and returns a new list whereas `forEach` applies the operation with side effects to the list. More info here: https://stackoverflow.com/q/34426458/6513921 — ruth, Jun 06 '20 at 05:50

Getting only a part of values from array of JSON objects in angular

1 Answers1