I am fetching data from an API and I need to display it in a key-value format on a mat table. The keys are predefined and not provided by the API.
The data retrieved from the API is shown here: image1
I want to display it on a mat table like this: mat table image
Therefore, I am attempting to structure my main data in a key and value format as follows:
dataAddress = [
{key: "Company Name", value: "Abuja Corp"},
{key: "Company Address", value: "1-301, Sector 18,"},
{key: "Email Address", value: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f39a9d959cb3949e929a9fdd909c9e">[email protected]</a>"},
{key: "Phone number", value: "9999999999"},
];
I have attempted the following:
interface Data{
key:string;
value:string;
}
const keys =[
'Company Name',
'Company Address',
'Email Address',
'Phone Number'
]
})
export class CompanyInformationComponent implements OnInit {
currencies = [];
dialogRef: any;
header = [{name: "Company Information"}];
//dataAddress:any;
dataAddress = [
];
dataSetting = [
{id: 1, key: "Home/local currency", value: "Naira"},
{id: 2, key: "International Currency", value: "USD"},
{id: 3, key: "Auto-Post JV?", value: ""}
];
displayedColumns: string[] = ['key', 'value'];
constructor(
private companyInformationService: CompanyInformationService) {
}
ngOnInit(): void {
this.refresh();
}
refresh() {
this.getCompanyInformation();
}
getCompanyInformation()
{
const data1 ={};
this.companyInformationService.getCompaniesInformationList().subscribe(data => {
this.dataAddress = data.items;
console.log("data",this.dataAddress);
const newData: Data[] =[];
for(const prop in this.dataAddress){
newData.push({
key:keys,
value: this.dataAddress[prop]
});
}
});
}
}
However, I encountered this error :
Type 'string[]' is not assignable to type 'string'.ts(2322)
Untitled-1(2, 5): The expected type comes from property 'key' which is declared here on type 'Data'