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",
},
],
}
]
Related
I'm trying to code an example that shows two dropdowns: one for countries, and one for related states/provinces. When you choose a country on the first dropdown, the values of the second dropdown should be updated to display only the provinces/states of the selected country. Usually this is accomplished using some sort of Ajax call, but in this case the requirement is to try it purely with react-jsonschema-form. Is this actually possible ? I have seen several examples using dependencies / references, but none solving this particular scenario.
So far I came up with this: https://codesandbox.io/s/fervent-cherry-lokjk?file=/src/App.js
{
"definitions": {
"Countries": {
"title": "Country",
"type": "object",
"properties": {
"country": {
"type": "string",
"enum": [
"CANADA",
"USA",
"MEXICO"
]
}
},
"dependencies": {
"country": {
"oneOf": [
{
"properties": {
"country": {
"enum": [
"CANADA"
]
},
"province": {
"type": "string",
"title": "Province",
"enum": [
"AB",
"BC",
"MB"
]
}
}
},
{
"properties": {
"country": {
"enum": [
"USA"
]
},
"province": {
"type": "string",
"title": "State",
"enum": [
"AL",
"AK",
"AR"
]
}
}
},
{
"properties": {
"country": {
"enum": [
"MEXICO"
]
},
"province": {
"type": "string",
"title": "State",
"enum": [
"AGS",
"BC",
"BCS"
]
}
}
}
]
}
}
}
},
"title": "Demo for countries",
"type": "object",
"properties": {
"currentCountry": {
"$ref": "#/definitions/Countries",
"title": "Select country / province / state"
}
}
}
which basically can render a Country dropdown and a State/Province dropdown. When selecting a country, the corresponding state/province dropdown is updated correctly with the new set of enum values.
However, with this approach, the form will submit a field named "currentCountry" with two properties inside, the country and the province
currentCountry: { country: "USA" , province: "AL" }
but of course the idea is to submit "country" and "province" as two different form fields, without the need to be wrapped.
So, does anyone know how to achieve this typical use case ? Is there any best approach to it using JSON schemas ?
Maybe having to code a custom widget ? (I would like to avoid that if possible)
Thanks in advance !
After playing a bit more, seems I found the solution. A correct schema that does exactly what is needed is this one:
{
title: "Demo for countries",
type: "object",
properties: {
country: {
type: "string",
title: "Country",
enum: ["CANADA", "USA", "MEXICO"]
}
},
dependencies: {
country: {
oneOf: [
{
properties: {
country: {
enum: ["CANADA"]
},
province: {
type: "string",
title: "Province",
enum: ["ALBERTA", "BRITISH COLUMBIA", "MANITOBA"]
}
}
},
{
properties: {
country: {
enum: ["USA"]
},
province: {
type: "string",
title: "State",
enum: ["ALABAMA", "OREGON", "ARKANSAS"]
}
}
},
{
properties: {
country: {
enum: ["MEXICO"]
},
province: {
type: "string",
title: "State",
enum: ["JALISCO", "BAJA CALIFORNIA", "CHIAPAS"]
}
}
}
]
}
}
}
and the above codesandbox example has been updated to reflect this change.
Happy to know this scenario can be achieved with JSON schemas !
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" }
];
}
}
I have a problem pointing dataTable to the right spot in the JSON. I receive a nested array:
{
"status": "ok",
"count": "7",
"msg ": "Operation Successful",
"data": [{
"contactHasServiceArea": true,
"issueCategories": [{
"id": "8",
"description": "Finance"
},
{
"id": "9",
"description": "Housing"
},
{
"id": "10",
"description": "International"
}
],
"cases": [{
"id": 31645,
"client_name": "Matthew",
"issue": "Assessment Completion",
"referral": null,
"opened_date": "10\/07\/2017",
"case_status": "Open"
}, {
"id": 31668,
"client_name": "Fanky ",
"issue": "Complex",
"referral": null,
"opened_date": "01\/07\/2017",
"case_status": "Open"
}]
}]
}
How do I point to the "cases" object? I'm sure this is simply, but I'm confused by the many options in the dataTables config.
I tried variations of data, dataSrc as well as data.cases or just cases, etc.
Thanks
$('#cases_table').DataTable( {
"ajax": "ajax/getCases",
"dataSrc" : "data.cases",
"data" : "cases",
"columns": [
{ "data": "client_name" },
{ "data": "issue" },
{ "data": "referral" },
{ "data": "opened_date" },
{ "data": "case_status" }
]
} );
You can configure like this:
$('#cases_table').DataTable( {
"ajax": {
"url": "ajax/getCases",
"dataSrc" : "data.cases"
},
"columns": [
{ "data": "client_name" },
{ "data": "issue" },
{ "data": "referral" },
{ "data": "opened_date" },
{ "data": "case_status" }
]
} );
datasrc points into the returns json. Remove the data option.
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 have the following collection:
"items": [{
"id": 1,
"title": "Montrachet",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [
{"description" : "Kırmızı Şaraplar Desc"},
{"region" :"Bordeaux"},
{"age": "16"},
{"producer" :"Kayra"},
{"grapeType":"Espadeiro"}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999"
},
{
"id": 2,
"title": "Montrachet2",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [
{"description" : "Kırmızı Şaraplar Desc"},
{"region" :"Bordeaux"},
{"age": "16"},
{"producer" :"Kayra"},
{"grapeType":"Chardonnay"}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999",
}
]
I want to grab unique grapeTypes from that collection. The returning array shold be ["Chardonnay","Espadeiro"]
What is the best way to do it with lodash?
I think this combination of pluck, map and filter should do it:
var result = _.chain(obj.items).pluck('properties').map(function(obj) {
return _.filter(obj, function(prop) {
return prop.grapeType;
})[0].grapeType;
}).uniq().value();
console.log(result);
Check the demo run below.
// Code goes here
var obj = {
items: [{
"id": 1,
"title": "Montrachet",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [{
"description": "Kırmızı Şaraplar Desc"
}, {
"region": "Bordeaux"
}, {
"age": "16"
}, {
"producer": "Kayra"
}, {
"grapeType": "Espadeiro"
}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999"
},
{
"id": 2,
"title": "Montrachet2",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [{
"description": "Kırmızı Şaraplar Desc"
}, {
"region": "Bordeaux"
}, {
"age": "16"
}, {
"producer": "Kayra"
}, {
"grapeType": "Chardonnay"
}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999",
}
]
};
var result = _.chain(obj.items).pluck('properties').map(function(obj) {
return _.filter(obj, function(prop) {
return prop.grapeType;
})[0].grapeType;
}).uniq().value();
document.write(JSON.stringify(result));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
UPD. If grapeType can be missing from properties then the script should be
var result = _.chain(obj.items).pluck('properties').map(function(obj) {
return (_.filter(obj, function(prop) {
return prop.grapeType;
})[0] || {}).grapeType;
}).compact().uniq().value();
Here's one way to do it with lodash:
_(items)
.pluck('properties')
.map(function(item) {
return _.find(item, _.ary(_.partialRight(_.has, 'grapeType'), 1));
})
.pluck('grapeType')
.uniq()
.value();
First, you get the properties arrays using pluck(). Next, you use find() to get the first object in this array that has a grapeType property. This is done using has(), and partially-applying the argument to build the callback function.
Next, you use pluck() again to get the actual property values. Finally, uniq() ensures there are no duplicates.