jsoneditor
jsoneditor copied to clipboard
Implement a way to copy the current path
There are various options:
- Add a new action menu entry "Copy path"
- Add a button "Copy path" right from the path in the navigation menu
- Create a more generic popup on the nodes which shows you the field, value, path and other meta information of a node and make it easy to copy them.
We should discuss in more detail.
Hi, How can we implement this feature? I want to add this feature and remove some others
How can we implement this feature?
That's a bit of a broad question. You can clone the source code and figure out how for example the "duplicate" button is implemented, add this new feature alongside it.
Hi, Is it possible to retrieve the path to some selected node in the json? onEvent can print the path to console (using consol.log) but i don't know if it is possible to extract the path and store in a prop.
@hoangmt you can use onEvent
to get the path(s) of the current selection. If you have the path, you can use a util function like get
from lodash to pick the nested value from your JSON. Is that what you mean?
@josdejong , thank you so much for replying. I figured it out.
I'm curious to know if there's a way to get the full JSON path for a deeply-nested value. I'll give you some context.
I have a heavy JSON object with deeply-nested objects. When I pop that in the editor I can easily makes changes to any of the keys or values, but is there a way to get the JSON path up until the key that's associated with the value I just changed?
I think this issue is related to #168
Currently you can get the path of the currently selected node by using onEvent
or onSelectionChange
, does that help you?
After some digging through the source code I was able to figure out a solution that answers my specific need. In fact, I passed the actions, params parameters further down into the onAction or onChange, can't recall, but now it's glorious, as it's giving me the path in index PLUS property names. So, it's super awesome. When I'm done working on what I'm using this for, I will submit my modifications and if you like them you can integrate them in your code. For now, I don't know if my modification breaks anything else, but the tree mode seems good on my end. (The tree mode is the only mode I'm using)
Use this code and put the absolute value in the text box and any HTML tag
var options={
mode:'tree or view',
onEvent: function(node, event) {
// var container = document.getElementById("path");
var absolute = "";
for (let i = 0; i < node.path.length; i++) {
// console.log(typeof node.path[i]);
if (typeof node.path[i] === 'number') {
absolute = absolute.substring(0, absolute.length - 1);
absolute += '[' + node.path[i] + ']';
} else {
absolute += node.path[i];
}
if (i !== node.path.length - 1) absolute += ".";
}
}
}

Thanks for sharing Mukesh!
Why onEvent is fired only for Tree mode, but not Code or Text? Is there any option to get the path for those two mentioned modes?
Why onEvent is fired only for Tree mode, but not Code or Text? Is there any option to get the path for those two mentioned modes?
Those different modes load a totally different editor under the hood. The 'code' mode doesn't support the onEvent
callback.