We had settled on using Aurelia as a JS framework, but hit a wall with routing. We have hierarchical navigation, which Aurelia Router does not support (https://github.com/aurelia/router/issues/90).
Navigation also depends on who is logged in, and each path from the primary navigation can have 1, 2 or 3 levels. Here is a sample of what we are doing now using knockoutjs (we are moving to a SPA): http://jsfiddle.net/22dy9yqw/4/. The data source for the navigation has to be a nested JSON object that represents the navigational structure, and the UI has to remain as is (bottom level is a dropdown). Here is an example of our structure:
[
{
"name": "No SubNav",
"href": "\/no-subnav",
"id": "no-subnav"
},
{
"name": "Settings",
"href": "\/settings\/",
"id": "settings",
"children": [
{
"name": "Setting1",
"href": "\/settings\/setting1\/",
"id": "setting1"
}, {
"name": "Setting2",
"href": "\/settings\/setting2\/",
"id": "setting2"
}
]
},
{
"name": "Reports",
"href": "\/reports\/",
"id": "reports",
"children": [
{
"name": "Section1",
"href": "\/reports\/section1\/",
"id": "section1",
"children": [
{
"name": "Section1 Report1",
"href": "\/reports\/section1\/report1",
"id": "report1-1",
}, {
"name": "Section1 Report2",
"href": "\/reports\/section1\/report2",
"id": "report1-2",
}, {
"name": "Section1 Report3",
"href": "\/reports\/section1\/report3",
"id": "report1-3",
}
]
}, {
"name": "Section2",
"href": "\/reports\/section2\/",
"id": "section2",
"children": [
{
"name": "Section2 Report1",
"href": "\/reports\/section2\/report1",
"id": "section2-1",
}, {
"name": "Section2 Report2",
"href": "\/reports\/section2\/report2",
"id": "section2-2",
}, {
"name": "Section2 Report3",
"href": "\/reports\/section2\/report3",
"id": "section2-3",
}, {
"name": "Section2 Report4",
"href": "\/reports\/section2\/report4",
"id": "section2-4",
}, {
"name": "Section2 Report5",
"href": "\/reports\/section2\/report5",
"id": "section2-5",
}
]
}
]
}
]
Can something like this be done easily with Aurelia while still taking advantage of other Router functionality (e.g., mapping)? Is there a better solution? I am new to the JS framework world and am a bit overwhelmed.
Related
Have an object that needs to be pass inside the array of source using javascript,throwing an error spec is undefined when using push function. will push function work for this scenario
var a = [
"name": "ben",
"type": "male",
"appType": "human",
"spec": {
"view": "instanceview",
"sink": {
"source": [{
"data": {
"path": "google/path",
"name": "test",
"Id": "11234",
},
"ref": "www.xyz.com",
"id": "isdfjsbfjsfb",
"resourceType": "app"
}
],
},
},
}]
var b = {
"data": {
"path": "google/path",
"name": "goldengate",
"Id": "11234vndslknvlsmnv",
},
"ref": "www.xyz.com",
"id": "6452367e5375",
"resourceType": "app"
}
a.spec.sink.source.push(b);
would expect b to be pushed to source
An array with string keys is not a valid structure, you need to convert a to an object
var a = { // <-- here
"name": "ben",
"type": "male",
"appType": "human",
"spec": {
"view": "instanceview",
"sink": {
"source": [
{
"data": {
"path": "google/path",
"name": "test",
"Id": "11234",
},
"ref": "www.xyz.com",
"id": "isdfjsbfjsfb",
"resourceType": "app"
}
],
},
},
} // <-- here
I have a JSON string in nested pattern like below:
NESTED (Just Example):
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
}
I want an option or way to convert this nested JSON string to a flat JSON string so that I can insert them like a record in SQL table.
Can you please help on how to structure the JSON from nested to flat?
I have a list of paths like this :
var paths = [
"/org/openbmc/UserManager/Group",
"/org/openbmc/records/events",
"/org/openbmc/HostServices",
"/org/openbmc/UserManager/Users",
"/org/openbmc/records/transactions",
"/org/openbmc/UserManager/Groups",
];
And I would like to transform it into a JSON to have this :
var list = {
"name": "org",
"path": "/org",
"children": [
{
"name": "openbmc",
"path": "/org/openbmc",
"children": [
{
"name": "UserManager",
"path": "/org/openbmc/UserManager",
"children": [
{
"name": "Group",
"path": "/org/openbmc/UserManager/Group"
},
{
"name": "Users",
"path": "/org/openbmc/UserManager/users"
},
{
"name": "Groups",
"path": "/org/openbmc/UserManager/Groups"
}
]
},
{
"name": "records",
"path": "/org/openbmc/records",
"children": [
{
"name": "events",
"path": "/org/openbmc/records/events"
},
{
"name": "transactions",
"path": "/org/openbmc/records/transactions"
}
]
}
]
}
]
}
Seems many node.js lib can do this, but I cant find in Javascript the exact same structure. Do you have an idea ?
I'm having a hard time finding the right way to properly structure my json data to achieve what I need with d3.js.
My content is made of "articles", which have "tags" in a many-to-many relationship.
Therefore, an article can have several tags, a tag can have several articles.
I want to represent my content as a node tree, in such way:
But right now, tags and posts are reproduced several times, as such:
How can I avoid the tag & posts duplication, and instead have lines pointing to the correct nodes? Or is there a better way to format my json data to achieve this sort of visualisation?
You can see my code in action at this fiddle.
Here is the data:
var json_data= {
"name": "Histoire du Web",
"children": [
{
"name": "américain",
"type": "tag",
"count": "1",
"children": [
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
"name": "american",
"type": "tag",
"count": "2",
"children": [
{
"name": "Doug Englebart",
"type": "article",
"count": 5
},
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
"name": "coding horror",
"type": "tag",
"count": "1",
"children": []
},
{
"name": "développeur",
"type": "tag",
"count": "1",
"children": [
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
"name": "Engelbart's Law",
"type": "tag",
"count": "1",
"children": []
},
{
"name": "entrepreneur",
"type": "tag",
"count": "1",
"children": [
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
"name": "forum",
"type": "tag",
"count": "1",
"children": [
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
},
{
"name": "hypertext",
"type": "tag",
"count": "1",
"children": [
{
"name": "Doug Englebart",
"type": "article",
"count": 5
}
]
},
{
"name": "interaction",
"type": "tag",
"count": "1",
"children": [
{
"name": "Doug Englebart",
"type": "article",
"count": 5
}
]
},
{
"name": "mouse",
"type": "tag",
"count": "1",
"children": [
{
"name": "Doug Englebart",
"type": "article",
"count": 5
}
]
},
{
"name": "stackoverflow",
"type": "tag",
"count": "1",
"children": [
{
"name": "jeff atwood",
"type": "article",
"count": 7
}
]
}
]
};
It is not easy to use a tree layout to represent data where nodes share parents, however it is possible and a detailed description can be found here: https://gist.github.com/GerHobbelt/3683278
From the link:
Of course, some brutal hacking, e.g. duplication of partial trees to convert multi-parent to many times the same with single parent, can be applied, but it might be a much better option to use a true graph layout mechanism, such as d3.layout.force, and apply the proper constraints to make it do what you want.
I have some problems with calling mixes in jade.
There is fragment of my layout:
section.page-content
if blocks && blocks.content
each blockProps, blockName in blocks.content
+blockName(blockProps)
I pass these params::
"blocks": {
"content": {
"menu": {
"items": [
{
"href": "href1",
"title": "title1",
"target": "target1",
"text": "text1"
},
{
"href": "href2",
"title": "title2",
"target": "target2",
"text": "text2"
}
]
},
"catalog_structure": {
"items": [
{
"text": "i1",
"href": "i1 href",
"title": "tit"
},
{
"text": "i2",
"href": "i2 href",
"title": "tit"
},
{
"text": "i3",
"href": "i3 href",
"title": "tit",
"items": [
{
"text": "i3_1",
"href": "i3_1 href",
"title": "tit"
},
{
"text": "i3_2",
"href": "i3_2 href",
"title": "tit"
}
]
},
{
"text": "i4",
"href": "i4 href",
"title": "tit"
}
]
},
}
}
And i want to call mixin with the name "blockName".
I tryed to call it in different ways.
Please, help me with my question.
Sorry for my poor english.
It is not possible.
visionmedia confirmed a year ago "it's not currently possible no"
Reference:
https://github.com/visionmedia/jade/issues/751