How to convert indexed Json to normal Json array in Angular 7 - angular7

Question

I get the data from API end point as below
But the output I expect is just an array of object which is like
[{Crqnumber: "CRQ000000135318",
approvalstatus: "Approved",
changecoordinator: "Sariga Suresh",
productname: "MSS (NextGen)",
status: "Closed",
statusreason: "Successful"},
{Crqnumber: "CRQ000000135318",
approvalstatus: "Approved",
changecoordinator: "Sariga Suresh",
productname: "MSS (NextGen)",
status: "Closed",
statusreason: "Successful"},
{Crqnumber: "CRQ000000135318",
approvalstatus: "Approved",
changecoordinator: "Sariga Suresh",
productname: "MSS (NextGen)",
status: "Closed",
statusreason: "Successful"}]
I decide to use pipe() and map() for achieving this, but I am stuck. I could not achieve the expected out.
my service is
export class CrqData{
constructor(private http: HttpClient){}
getCrqList(){
return this.http.get<Crq[]>('http://d7598:8000/crqlist/').pipe(map((responseData=>{
let temp: Crq[]=[];
temp=responseData;
return temp
})));
}
}
my component ts file
export class CrqComponent implements OnInit {
crqList = [];
constructor(private crqData:CrqData) {
this.crqData.getCrqList().subscribe((data)=>{
console.log(data)
}, (error)=>{
console.log(error);
});
}
ngOnInit() {
}
}
my component html
<mat-card style="padding: 1.5%; margin: 1%;" *ngFor="let crq of crqList">
<mat-card-content>
<div style="line-height: 20px;">
<div style="float: left; font-weight: bold;">
<p>CRQ No: {{crq.Crqnumber}}</p>
</div>
<div style="float: right; font-weight: bold;">
<p style="float: left;padding-top: 1px;">
<i class="material-icons" style="font-size: 12px;">fiber_manual_record</i>
</p>
<p style="float: right;">{{crq.approvalstatus}}</p>
</div>
</div>
<div style="clear: both; line-height: 6px; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">
<p style="text-align: left;">Change coordinator: {{crq.changecoordinator}}</p>
<p style="text-align: left;">Title: {{crq.productname}}</p>
</div>
</mat-card-content>
</mat-card>
my object is
export interface Crq{
Crqnumber: string;
approvalstatus: string;
changecoordinator: string;
productname: string;
status: string;
statusreason: string;
}

Answer 1

First of all, you should change your type in the http.get call. You're not recieving a Crq[], you're receiving an object which contains 3 properties, where one property (results) is of the type Crq[].
So you should define a type which holds all these 3 properties, like this: (you can put this above the line export class CrqData {)
interface CrqResponse {
count: number;
error: number;
results: Crq[];
}
Now, you can use this in your http request and use the response, like this:
getCrqList(){
return this.http.get<CrqResponse>('http://d7598:8000/crqlist/').pipe(map((responseData=>{
return responseData.response;
})));
}
I'd also suggest that you throw an error if the error property is not equal to 0, so that instances that use your service can catch the error if there is one. So getCrqList() should look something like this:
getCrqList() {
return this.http.get<CrqResponse>('http://d7598:8000/crqlist/').pipe(switchMap((responseData=>{
if(responseData.error !== 0) {
return throwError(responseData.error);
}
else {
return of(responseData.response);
}
})));

Answer 2

I think you have to get results property from the response so you have to modify this method to be like this
export class CrqData{
constructor(private http: HttpClient){}
getCrqList(){
return this.http.get<Crq[]>('http://d7598:8000/crqlist/').pipe(map((responseData=>{
const { results } =responseData;
return results
})));
}
}

Answer 3

I found the answer. I should have my service class as below
export class CrqData{
constructor(private http: HttpClient){}
getCrqList(){
return this.http.get<Crq[]>('http://d7598:8000/crqlist/').pipe(map((responseData=>{
let temp: Crq[]=[];
for(let data in responseData){
for(let d in responseData[data]){
console.log(responseData[data][d]);
temp.push(responseData[data][d]);
}
}
return temp
})));
}
}