I have a query in GraphQL as follows:
person {
id
title {
name
}
}
I am having an issue to pass to the datatable component the name of the title as a reference.
I define the columns as follows, but as it is expected the title name doesn't display. Any idea on how to reference the title name?
const columns = [
{
name: "id",
label: "ID",
},
{
name: "title.name",
label: "Title Name",
}
]
I found the solution, one has to do as follows:
{
name: "title",
label: "Title",
options: {
customBodyRender: (dataIndex, tableMeta, updateValue) => {
return dataIndex.title;
}
}
},
Related
I have a simple JSON object
simple_chart_config = {
chart: {
container: "#tree-simple"
},
nodeStructure: {
text: { name: "Question" },
children: [
{
text: { name: "Answer 1" }
}
]
}
};
And I'd like to add a new subfield within the first entry on the children array so that the final output is
simple_chart_config = {
chart: {
container: "#tree-simple"
},
nodeStructure: {
text: { name: "Question" },
children: [
{
text: { name: "Answer 1" },
children: [
{
text: { name: "Question 2" }
}
]
}
]
}
};
I've tried several methods, such as
var questionTwoStr = '{"children": [{"text": { "name": "Question 2" }}]}'
var questionTwo = JSON.parse(questionTwoStr);
simple_chart_config.nodeStructure.children[0] = questionTwo;
but I'm having issues working out all of the nested indexes in my head. This is for a tree in treant.js if that context is helpful at all.
I think I'm mostly confused because the place I'm trying to add the new subfield doesn't have a key, which I thought was required for JSON.
There's no need to use JSON here; you can add the object itself:
simple_chart_config.nodeStructure.children[0].children = [{text: { name:"Question 2" }}];
I want to append objects in my array using setState function.
My initial variable looks like this:
columns1: [
{
title: "Sr. No.",
render(text, record, index) {
return {
children: <div> {index + 1}</div>,
};
},
},
{
title: "Account ID",
dataIndex: "Accountid",
},
{
title: "Alias",
dataIndex: "Alias",
},
],
Now, in a function I want to add 2 more objects in columns1:
const projCol = {
title: "Projected Cost",
dataIndex: "forecast_amount",
key: "forecast_amount",
},
const projChange = {
title: "Percentage Change",
dataIndex: "%change",
key: "%change",
}
if I only wanted to add projCol I can do
this.setState((prevState) => {
return {
columns1: [...prevState.columns1,projCol],
};
});
but how can I add both projCol and projChange?
Just add one more element to the array like you do with projCol, separated by commas.
this.setState((prevState) => {
return {
columns1: [...prevState.columns1, projCol, projChange]
};
});
I am trying to write some meta information for a website (using vue-meta) and I need to add some tags as objects within an array named meta.
The code is like this:
metaInfo() {
return {
htmlAttrs: { lang: "en"
},
title: this.Post.Title,
meta: [
{
name: "description", content: this.Post.Title
},
{
name: "date", content: this.Post.DateCreated
},
{
name: "author", content: this.Post.Author
},
// Now I need multiple objects of: {name: "tag", content: "Tags.TagName"} like this but doesn't work:
function() {
this.Tags.forEach(function (TagName, index) {
{ property: "tag", content: "TagName" }
})
}
],
}
}
How can I create my array so that I end up with this for example:
meta: [
{
name: "description", content: "Javascript question"
},
{
name: "date", content: "20200421"
},
{
name: "author", content: "volumeone"
},
{ property: "tag", content: "Javascript" }
,
{ property: "tag", content: "Programming" }
,
{ property: "tag", content: "Newbie" }
]
you can do such sort of thing.
var meta = [{
name: "description", content: this.Post.Title
},
{
name: "date", content: this.Post.DateCreated
},
{
name: "author", content: this.Post.Author
}]
this.Tags.forEach(function (TagName, index) {
meta.push({ property: "tag", content: "TagName" })
})
metaInfo() {
return {
htmlAttrs: { lang: "en"
},
title: this.Post.Title,
// or you can just write "meta" instead of "meta: meta" its an shorthand // code
meta: meta
}
}
Unless I'm missing something, you can just use push and pass the object.
var meta = [];
meta.push({"property" : "tag","content" : "test"});
console.log(meta);
I have a data model that I want to be able to add a generic amount of filters to. I am specifying a name and a value. How can I add these hasMany associated fields as filters to my grid? I have attempted to write custom filtering option, but I can't have filters show up without an attached dataIndex, which is not available for the hasMany association.
Ext.define('AirGon.model.Project', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Link', type: 'string' },
{ name: 'Title', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'MappedMetadata', mapping: 'Metadata'},
{ name: 'XMax', type: 'float' },
{ name: 'XMin', type: 'float' },
{ name: 'YMax', type: 'float' },
{ name: 'YMin', type: 'float' }
],
hasMany: { model: 'Metadata', name: 'Metadata', associationKey: 'Metadata' }
});
Ext.define('Metadata', {
extend: 'Ext.data.Model',
fields: ['Name', 'Value']
});
This is my custom filtering attempt. I am getting the DataStore from the main store and then adding custom rendering, but I can't filter or sort this column because of the lack of a dataIndex.
var column = {
header: 'Meta',
//?????????dataIndex: 'MappedMetadata[0]',?????
sortable: true,
filterable: true,
filter: {
type: 'string'
},
renderer: function (value, meta, record) {
console.log(record.MetadataStore.data.items[index].data)
return record.MetadataStore.data.items[index].data.Value;
}
}
Data. The data is modeled so that a variable amount of metadata can be entered and the 'tag' will not be known by the system.
{
"Link": "link.com",
"Title": "project",
"Description": "descript",
"State": "",
"Metadata": [
{
"Name": "County",
"Value": "32"
},
{
"Name": "Info",
"Value": "info"
},
{
"Name": "State",
"Value": "TN"
}
],
"XMin": "-1",
"XMax": "-1",
"YMin": "1",
"YMax": "1"
}
I was able to solve this by dynamically flattening the data model and adding columns once the store has been loaded. Although this breaks the MVC structure this was the best solution I came up with so it might be able to help you.
var defaultColumns = [];
var store = Ext.getStore('store');
store.on('load', function (store) {
var model = store.model;
var fields = model.getFields();
store.getAt(0).MetadataStore.data.items.forEach(function (item, index) {
var header = item.data.Name;
//isField returns a boolean if the field is already part of the data model
if (!isField(fields, header)) {
//Add a new metadata field to the data model
var field = { name: header, mapping: 'Metadata[' + index + '].Value' }
fields.push(field)
//Add a new metadata column
var column = {
header: header,
dataIndex: header,
sortable: true,
filterable: true,
filter: {
type: 'list'
},
flex: 0.2
}
defaultColumns.push(column);
}
});
model.setFields(fields);
//reload the grid after adding columns
var gridView = Ext.ComponentQuery.query('gridpanel')[0];
gridView.reconfigure(store, defaultColumns);
});
//reload the data after creating new fields
store.load();
I then set the columns of the grid to defaultColumns.
{
xtype: 'grid',
store: 'Projects',
overflowX: 'auto',
autoScroll: true,
features: [filters],
columns: defaultColumns
}
I know this is probably been asked before, but having tried to find an answer - I am guessing either I am not comprehending some of the answers right, or I am looking at the problem all wrong.
I am using a complex SLC loopback query - and the api returns the JSON in the following format:
> [ {"id":"1","name":"John", "type":"commercial",
> "address":{"street1":"1 dalhousie lane", "street2":"some street"}},
> {"id":"2","name":"Jane", "type":"commercial",
> "address":{"street1":"15 dalhousie lane", "postcode":"1283833"}},
> {"id":"3","name":"Jack", "address":{"street1":"12 dalhousie lane",
> "postcode":"9383833", "geo":{"lat":"9393939","long":"99393939"}}}
]
As you can see, following are the problems -
1. Nested JSON - multiple levels
2. Inconsistent / Missing Key values,
e.g.: "id":"2" -> "type" -> missing
e.g.: "id":"3" -> "address" -> "geo"
When I try to use the KendoUI grid to display the above json, i get errors such as - property undefined. I understand, options i can explore and what I am supposed to do -
Define the schema - how? Especially for missing keys.
Parse the data ?
Would be great if someone could kindly let me know, how to move forward with this. Below is the code for the grid -
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: apiurl,
dataType: "json",
}
}
},
columns: [
{
field: "id",
title: "User Id"
},
{
field: "name",
title: "User Name",
},
{
field: "type",
title: "User Type",
},
{
field: "address.street1",
title: "Street 1",
},
{
field: "address.street2",
title: "Street 2",
},
{
field: "address.postcode",
title: "Street 2",
},
{
field: "address.geo.lat",
title: "Latitude",
},
{
field: "address.geo.long",
title: "Longitude",
}
]
});
You can use column templates:
columns: [
{
field: "id",
title: "User Id"
},
{
field: "name",
title: "User Name",
},
{
field: "type",
title: "User Type",
template: function(dataItem) {
return dataItem.type ? kendo.htmlEncode(dataItem.type) : "";
}
},
{
field: "address",
title: "Street 1",
template: function(dataItem) {
return dataItem.address.street1 ? kendo.htmlEncode(dataItem.address.street1) : "";
}
},
{
field: "address",
title: "Street 2",
template: function(dataItem) {
return dataItem.address.street2 ? kendo.htmlEncode(dataItem.address.street2) : "";
}
},
{
field: "address",
title: "Post Code",
template: function(dataItem) {
return dataItem.address.postcode ? kendo.htmlEncode(dataItem.address.postcode) : "";
}
},
{
field: "address",
title: "Latitude",
template: function(dataItem) {
return dataItem.address.geo && dataItem.address.geo.lat ? kendo.htmlEncode(dataItem.address.geo.lat) : "";
}
},
{
field: "address",
title: "Longitude",
template: function(dataItem) {
return dataItem.address.geo && dataItem.address.geo.long ? kendo.htmlEncode(dataItem.address.geo.long) : "";
}
}
]
Each template is a function that checks for the existence of the field and then returns the field value or an empty string.
Working DEMO
Another option is the use the schema.parse method to handle adding a default value for the missing field. Here is a link to the documentation - http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "yoururl",
dataType: "jsonp"
}
},
schema: {
parse: function(response) {
var items = [];
for (var i = 0; i < response.length; i++) {
var item = response[i];
if(!item.address.geo){
if(!item.address.geo.lat){
item.address.geo.lat = 0.0;
}
}
items.push(item);
}
return items;
}
}
});
dataSource.fetch(function(){
var data = dataSource.data();
var product = data[0];
console.log(product.name);
});
</script>
Hope this helps.
Wade