I am very new to PrimeNG table and I tried to load nested json doc into table, but I am unable to access data of nested array.
I am able to load flatten json in p-table but in nested json unbale to fetch the nested data
EX: { field: "address", header: "Address ", title: "Person Address" }
for this code am getting [object, object] in address column
I also tried with indexing like field address[0].id but not getting
This sample data of json fetching from API
Retailers=[
{
"id":1,
"name":"Preeti Mobiles",
"address":[{
"id": 1,
"addressLine1":"31/A, 2nd cross, 1st floor",
"addressLine2":"Tirumala Towers, Mejestic",
"city":"Bengaluru",
"state":"Karnataka",
"country":"India",
"pincode":500006
},
{
"id": 2,
"addressLine1":"31/A, 2nd floor",
"addressLine2":"Hebbal",
"city":"Bengaluru",
"state":"Karnataka",
"country":"India",
"pincode":500091
}
]
},
{
"id": 2,
"name": "Nanda Electronics",
"address": [{
"id": 1,
"addressLine1": "78/A, 4nd cross, 1st floor",
"addressLine2": "Kishan Empower, RR Nagar",
"city": "Bengaluru",
"state": "Karnataka",
"country": "India",
"pincode": 520006
}
]
},
{
"id": 3,
"name": "Kishan Electronics",
"address": [{
"id": 1,
"addressLine1": "86/A, 1nd cross, 2st floor",
"addressLine2": "Nanda Building, Hebbala",
"city": "Bengaluru",
"state": "Karnataka",
"country": "India",
"pincode": 520036
}
]
}
]
Type script code
ngOnInit() {
this.person();
}
person(){
this.personService.getpersonList().subscribe(data=>{
this.person_details = data;
console.log(this.person_details);
});
this.retailer_list = [
{ field: "name", header: "Name", title: "person Name" },
{ field: "address", header: "Address ", title: "person Address" }
];
}
}
Related
I have an array of objects with array of items in it as below. Is it possible to make use of material-table in react for making editable table?
I want to achieve
I am able to display the data but it not working for editable feature.
[
{
"name": "Customer 1",
"amount": 450,
"items": [
{
quantity: "1",
details: "Tea",
},
{
quantity: "2",
details: "Sweets",
},
],
},
{
"name": "Customer 2",
"amount": 560,
"items": [
{
quantity: "1",
details: "Tea",
},
{
quantity: "2",
details: "Sweets",
},
],
}
]
I have an array as shown below
[
{
"id": 42,
"name": "updateDate",
"displayName": "UPDATE DATE",
"uiControl": "DATERANGE",
"dataType": "STRING",
"uiOrder": 1,
},
{
"id": 44,
"name": "name",
"displayName": "First Name",
"uiControl": "TEXTBOX",
"dataType": "STRING",
"uiOrder": 1,
},
]
I want to filter objects in this array with the property UiControl === DATERANGE and create 2 objects from the filtered object and also append'FROM' and 'TO' to the name and the displayname property as shown below
final output:
[{
"id": 42,
"name": "fromupdateDate", // 'from'appended to name property
"displayName": "FROM UPDATE DATE", // 'FROM' appended to displayName property
"uiControl": "DATERANGE",
"dataType": "STRING",
"uiOrder": 1,
},
{
"id": 42,
"name": "toupdateDate", // 'to' appended to name property
"displayName": "TO UPDATE DATE", // 'TO' appended to displayName
"uiControl": "DATERANGE",
"dataType": "STRING",
"uiOrder": 1,
},
{ // this object stays the same
"id": 44,
"name": "name",
"displayName": "First Name",
"uiControl": "TEXTBOX",
"dataType": "STRING",
"uiOrder": 1,
}]
We can create such an array in multiple ways, but I want to find an optimized way of creating such an object.
flatMap will do what you want:
const input = [{
"id": 42,
"name": "updateDate",
"displayName": "UPDATE DATE",
"uiControl": "DATERANGE",
"dataType": "STRING",
"uiOrder": 1,
},
{
"id": 44,
"name": "name",
"displayName": "First Name",
"uiControl": "TEXTBOX",
"dataType": "STRING",
"uiOrder": 1,
},
];
const output = input.flatMap(v => v.uiControl === "DATERANGE"
? [
{ ...v,
name: `from${v.name}`,
displayName: `FROM ${v.displayName}`
},
{ ...v,
name: `to${v.name}`,
displayName: `TO ${v.displayName}`
}
]
: [v]);
console.log(output);
Note that you'll have to compile this with esnext support. See this question for more details. It also won't work out of the box on IE or Edge. If that's a problem in your use case, you'll want to use a polyfill or rely on map + reduce like this:
const output = input.map(v => v.uiControl === "DATERANGE"
? [
{ ...v,
name: `from${v.name}`,
displayName: `FROM ${v.displayName}`
},
{ ...v,
name: `to${v.name}`,
displayName: `TO ${v.displayName}`
}
]
: [v])
.reduce((acc, cur) => (acc.push(...cur), acc), []);
I am new to angular js.I am trying to fetch data from url.I know how to fetch data from json with single array.But if the json has many arrays,then how to fetch it?
For example:
The json is as follows:
{
"Details": [{
"approved": [{
"count": "2124",
"type": "Approved ",
"desc": "New registration"
}, {
"count": "902",
"type": "Deemed approved ",
"desc": "New registration"
}, {
"count": "60",
"type": "Approved ",
"desc": null
}, {
"count": "5",
"type": "Deemed approved ",
"desc": null
}, {
"count": "29",
"type": "Approved ",
"desc": null
}]
}, {
"pending": [{
"count": "492",
"type": "Amendment of core fields"
}, {
"count": "18",
"type": "New registration"
}, {
"count": "1",
"type": null
}]
}, {
"rejected": [{
"count": "29",
"type": "New registration"
}]
}, {
"resubmit": [{
"count": "9",
"type": "New registration"
}]
}]
}
Lets say you send the request as follows:
$http.get('/data').then(function(response) {
response // your JSON
});
Now inside response you will have your entire JSON as a javascript object. So you can use it as follows:
response.Details.approved[0].count // 2124
response.Details.pending[0].count // 492
After we have created a productType and have its type id, how can we set custom attributes during product create API calling. Until now what I've been doing is 1st, create the product, then update the custom attribute. But, I am unable to do so with the required attributes.
you can supply all the custom attributes in the product creation payload. Example - here I provide values for attributes brand on the master variant, for a previously created product type which specifies that there is an attribute called Brand:
{
"productType": {
"typeId": "product-type",
"id": "6c06998a-c576-4a8d-8ace-dc306d70e1d1"
},
"name": {
"en": "Some Product"
},
"slug": {
"en": "product_slug_sdfsdfsdfdsdfsdfdssdf"
},
"masterVariant": {
"prices": [{
"value": {
"centAmount": 2500,
"currencyCode": "EUR"
},
"country": "US"
}],
"attributes": [{
"name": "brand",
"value": "Hugo Boss"
}]
},
"variants": [{
"prices": [{
"value": {
"centAmount": 2600,
"currencyCode": "EUR"
},
"country": "US"
}],
"attributes": [{
"name": "brand",
"value": "Hugo Boss"
}]
}]
}
I am using Backbone.js, unexpectedly i am in the confused position now, because of this scenario..
my test object :
test: {
"links": {
"nameLink": {
"name": "name 1",
"name": "name 2",
"name": "name 3"
},
"ageLink": {
"age": "1",
"age": "2",
"age": "3"
}
},
"data": {
"element": {
"project": "project 1",
"title": "title1",
"brand": "brand1"
},
"element": {
"project": "project 2",
"title": "title2",
"brand": "brand2"
},
"element": {
"project": "project 3",
"title": "title3",
"brand": "brand3"
}
}
}
I do have the josn data from server, it has the project name, links(there is nested links under), time stamps.
how can i split the data, and append appropriate UL elements. ( by name, by age ect.)
On click on the name, age links, how can sort (by name, age) the datas i appended to body tag? - without sorting the links menu?
How can i keep all this updated?
any good suggestion please?