Develop Reference

how to get a field from nested JSON in Javascript?

I want to take a field from nested JSON object as a string which is used as parameter.
I'm using a github project https://github.com/bencripps/react-redux-grid.
this react component is used for tree-grid.
I have a data and I want to map it as a tree-grid view.
My nested JSON object is below. It comes from an API. I want to take "2020.total" as a parameter (line 4)
"id": 1,
"parentId": -1,
"Name": "Category 1",
"2020": {total:120, tax:12},
"children": [{
"id": 11,
"parentId": 1,
"Name": "Category 11",
"2020": {total:23, tax:2},
}]
when i finally get this parameter i use it as a variable in below code (line 16)
const complexData = {
showTreeRootNode: false,
data:datafromAPI,
gridType: 'tree',
dragAndDrop: true,
columns: [
{
name: 'Name',
className: 'additional-class',
dataIndex: 'Name',
sortable: false,
expandable: true
},
{
name: 'Total Payment',
dataIndex: 2020.total,
sortable: false,
className: 'additional-class'
}],
};
"Name" attribute is working fine but "Total Payment" is not working.
i tried those syntax;
'2020.total'
'[2020].total'
'[2020][total]'
I know this is a little bit syntax question but i don't know how to search for it.
thanks for all answer.

let a = {
"id": 1,
"parentId": -1,
"Name": "Category 1",
"2020": {total:120, tax:12},
"children": [{
"id": 11,
"parentId": 1,
"Name": "Category 11",
"2020": {total:23, tax:2},
}]
}
Try a[2020].total

You can access it like this:
let a = {
"2020": {total:120, tax:12},
}
a[2020].total
a["2020"].total

I need recommendation for structure to use Cytoscape js

We are using Cytoscape + neo4j + spring boot + REST. We've tried to use some formats pass to frontend, however didn't work that well. So looking for best structure to use Cytoscape js.
========
Added later.
For example response from neo4j apoc export json query would be like this:
{
"application": {
"type": "node",
"id": "hhj354",
"labels": [
"Application"
],
"properties": {
"appid": "A90378",
"name": "hkjgj",
"status": "In Production"
}
},
"changes": [
{
"node": {
"type": "node",
"id": "fdsf324",
"labels": [
"Change"
],
"properties": {
"type": "gjhk",
"startdate": "2019-11-21 02:11:32"
}
},
"group": "2019-11",
"relation": sfd
},
{
"node": {
"type": "node",
"id": "fdsf324",
"labels": [
"Change"
],
"properties": {
"type": "gjhk",
"startdate": "2019-11-21 02:11:32"
}
},
"group": "2019-11",
"relation": sfd
},
{
"node": {
"type": "node",
"id": "fdsf324",
"labels": [
"Change"
],
"properties": {
"type": "gjhk",
"startdate": "2019-11-21 02:11:32"
}
},
"group": "2019-11",
"relation": 453
}
]
}
I need some detailed parsing codes. Parsing in backend or front end both ok as long as short enough.
Thanks in advance.

As far as I'm concerned, the front-end should do the less calculations as possible.
Therefore, try to send a JSON as close as possible to the format specified in the specs of cytoscape.js
The basic idea of graph is that it's composed of nodes and edges, those elements (as cytoscape calls them) have ids that can help you select them in a easier way.
No Calculation in Back-End
If you want to use built-in format .json from CALL apoc.export.json.all("all.json",{useTypes:true})then you will have for example to do some transformation in the front-end:
responseJson => {
responseJson.map(element => {
return {
group: element.type,
data : {
id: `${element.type}${element.id}`,
myFavouriteProperty: element.property
}
}
}

TypeError: Object [object Array] has no method 'getProperty'

I'm kind of new to this whole posting a question thing, so please be gentle!
I am using Breeze as part of the "Hot Towel" SPA stack and retrieving data from a custom WebApi endpoint written in PHP. It's not a full implementation, I've just written enough to give me what I need.
The metadata my endpoint is generating is as follows:
{
"shortName": "Project",
"namespace": "WebApi.ORM.Cartesius",
"autoGeneratedKeyType": "Identity",
"defaultResourceName": "Project",
"dataProperties": [
{
"name": "id",
"isPartOfKey": true,
"isNullable": false,
"dataType": "Int32"
},
{
"name": "title",
"isNullable": false,
"maxLength": 256,
"dataType": "String"
},
{
"name": "date",
"isNullable": false,
"dataType": "DateTime"
},
{
"name": "review_date",
"isNullable": true,
"dataType": "DateTime"
},
{
"name": "summary",
"isNullable": true,
"dataType": "String"
}
],
"navigationProperties": [
{
"name": "Team",
"entityTypeName": "Team:#WebApi.ORM.Cartesius",
"isScalar": true,
"associationName": "team_project_id_fkey",
"invForeignKeyNames": [
"project_id"
]
},
{
"name": "ProjectAuthor",
"entityTypeName": "ProjectAuthor:#WebApi.ORM.Cartesius",
"isScalar": true,
"associationName": "project_author_project_id_fkey",
"invForeignKeyNames": [
"project_id"
]
},
{
"name": "Itinerary",
"entityTypeName": "Itinerary:#WebApi.ORM.Cartesius",
"isScalar": true,
"associationName": "itinerary_project_id_fkey",
"invForeignKeyNames": [
"project_id"
]
},
Everything is working fine until I try and do an expand on my query:
var query = new breeze.EntityQuery()
.from("Project")
.where("id","eq",project.id)
.expand("ProjectAuthor");
This query returns the following from my endpoint:
[
{
"$id": 1,
"$type": "WebApi.ORM.Cartesius.Project",
"id": 2,
"title": "teat",
"date": "2013-11-04 14:00:00+07",
"review_date": null,
"summary": null,
"ProjectAuthor": [
{
"$id": 2,
"$type": "WebApi.ORM.Cartesius.ProjectAuthor",
"id": 1,
"account_id": 1,
"project_id": 2,
"Project": [
{
"$ref": 1
}
]
},
{
"$id": 3,
"$type": "WebApi.ORM.Cartesius.ProjectAuthor",
"id": 3,
"account_id": 2,
"project_id": 2,
"Project": [
{
"$ref": 1
}
]
}
]
}
]
Then Breeze chokes on it throwing:
TypeError: Object [object Array] has no method 'getProperty'
Debugging points to line 5059 in Breeze where it tries to getProperty on an array of entities rather than a single entity I assumed this had something to do with whether the navigation property was set to scalar or not but switching them around made no difference.
I'm sure I'm doing something massively wrong, but I can't figure out what it is and I've kind of hit a brick wall. I've read the docs from top to bottom and am implementing this as best as I can understand but it's possible I'm a little confused.
Thanks in advance for any help and apologies if I have not made myself clear or provided enough info

I think your problem is in the metadata
"name": "ProjectAuthor",
"entityTypeName": "ProjectAuthor:#WebApi.ORM.Cartesius",
"isScalar": true,
"associationName": "project_author_project_id_fkey",
"invForeignKeyNames": [
"project_id"
]
},
On that nav property Project->ProjectAuthor your telling it that its a scalar but its not in the data set..
"ProjectAuthor": [
{
..........
I've had this problem aswell .. 99% time its a metadata problem, if not there then start cutting metadata apart until you isolate the error .. though I'm sure thats the problem.. you need a hasMany there and an isScalar on the inverse navigation

How add 3 lines to the graphic in xCharts?

How I can add 3 lines to the graphic in xCharts? For make graphic with 2 lines I should write:
var data = {
"xScale": "time",
"yScale": "linear",
"type": "line",
"main": [
{
"data": getStatistic(), // Some JSON data
},
],
"comp": [
{
"type": "line",
"data": getStatistic(), // Some JSON data
},
],
};
But adding one more "comp" element doesn't work. On library website I not found graphic with more than two lines...

The answer can be found here: https://github.com/tenXer/xcharts/issues/21
main data and comp are data both Arrays. They can take many different data sets. The documentation might not explain this very well...
You can provide multiple data sets to the main Array to accomplish what you'd like. In example, here is how you might draw both pizza and tacos:
{
"main": [
{
"className": ".pizza",
"data": [
{
"x": "2012-11-05",
"y": 12
},
{
"x": "2012-11-06",
"y": 8
}
]
},
{
"className": ".tacos",
"data": [
{
"x": "2012-11-05",
"y": 8
},
{
"x": "2012-11-06",
"y": 11
}
]
}
]
}
You can add more data sets to this main Array. There is no limit.

Searching and editing nested JSON elements

Basically I want to be able, in Javascript (JQuery optionally), to search into a JSON with nested elements for a particular element and edit it.
Ex. search for "components" with id 110 and change the name to "video card".
Notice the following JSON is just an example. I am wondering if javascript libraries or good tricks exist to do such a thing, I don't think traversing the whole json or writing my own methods is the best solution.
{
"computers": [
{
"id": 10,
"components": [
{
"id": 56,
"name": "processor"
},
{
"id": 24,
"name": "ram"
}
]
},
{
"id": 11,
"components": [
{
"id": 110,
"name": "graphic card"
},
{
"id": 322,
"name": "motherboard"
}
]
}
]
}

You could try linq.js.

You can use this javascript lib, DefiantJS (http://defiantjs.com), with which you can filter matches using XPath on JSON structures. To put it in JS code:
var data = {
"computers": [
{
"id": 10,
"components": [
{ "id": 56, "name": "processor" },
{ "id": 24, "name": "ram" }
]
},
{
"id": 11,
"components": [
{ "id": 110, "name": "graphic card" },
{ "id": 322, "name": "motherboard" }
]
}
]
},
res = JSON.search( data, '//components[id=110]' );
res[0].name = 'video card';
Here is a working fiddle;
http://jsfiddle.net/g8fZw/
DefiantJS extends the global object JSON with the method "search" and returns an array with matches (empty array if no matches were found). You can try out the lib and XPath queries using the XPath Evaluator here:
http://www.defiantjs.com/#xpath_evaluator