enter image description here
I m getting json array data as shown in figure I m displaying it with material UI through React js. Now I want specific json path on Onclick event but for same key value pair i m getting all json path present in json data for that all key value, I want json path of only clicked node, how to get that*
for e.g Clicked Node : XPN.1: TEST
Json Path Array : (4) [‘[0].NK1[0].NK1.2.XPN.1’, ‘[0].NK11.NK1.2.XPN.1′, ‘[0].NK1[2].NK1.2.XPN.1’, ‘[0].PV2.PV2.3.CE.1’]
I want specific path instead of array of all same key value pair path .
import React, { useState } from "react";
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { TextField } from "@material-ui/core";
import TreeItem from '@material-ui/lab/TreeItem';
import TreeView from '@material-ui/lab/TreeView';
import axios from "axios";
import copy from "copy-to-clipboard";
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
root: {
height: 700,
flexGrow: 1,
maxWidth: 400
}
});
export const FileUpload3 = (props) => {
const classes = useStyles();
const [file, setFile] = useState();
const [fileName, setFileName] = useState();
const [data, setData] = useState([]);
const [key, setKey] = useState();
const getChildren = obj =>
Object.keys(obj).map(key => {
const hasChildren = typeof obj[key] === "object";
return {
id: hasChildren ? key : obj[key],
name: `${key}${hasChildren ? "" : `: ${obj[key]}`}`,
children: hasChildren ? getChildren(obj[key]) : []
};
});
const getData = objs => {
return objs.map(obj => ({
id: "root",
name: key,
children: getChildren(obj),
}));
};
const renderTree = nodes => {
return (
<TreeItem value={nodes.parents} nodeId={nodes.id} label={nodes.name}
onClick={() => handleClick(nodes)}
{Array.isArray(nodes.children)
? nodes.children.map(node => renderTree(node))
: null}
</TreeItem>
);
};
const handleClick = (e) => {
var mypath = getPath(data, e.id)
console.log("Json Path : ", mypath); // JSON PATH
}
function getPath(object, value) {
return Object
.keys(object)
.reduce((r, k) => {
var kk = Array.isArray(object) ? `[${k}]` : `${k}`;
if (object[k] === value) {
r.push(kk);
}
if (object[k] && typeof object[k] === 'object') {
r.push(...getPath(object[k], value).map(p => kk + (p[0] === '[' ? '' : '.') + p));
}
return r;
}, []);
}
const saveFile = (e) => {
console.log(e.target.files[0]);
setFile(e.target.files[0]);
setFileName(e.target.files[0].name);
}
const UploadFile = async (e) => {
const bindTree = async (e) => {
setData(e);
}
const setKeyData = async (e) => {
setKey(e);
}
console.log(file);
const formData = new FormData()
formData.append("formFile", file);
formData.append("fileName", fileName);
try {
const res = await axios.post("https://localhost:44316/api/TerserExpressionUtility", formData);
console.log(res.data);
const keyData = Object.keys(res.data);
//console.log(keyData);
setKeyData(keyData);
//Json object excluding the root node ADT_A01
const result = Object.keys(res.data).map((key) => res.data[key]);
;
//Convert the result into string array
const data2 = JSON.stringify(result);
//Parse the string into the object to bind it to TreeView
const treeObject = JSON.parse(data2);
bindTree(treeObject)
}
catch (ex) {
console.log(ex);
}
};
return (
<>
<input type="file" onChange={saveFile} />
<input type="button" value="upload" onClick={UploadFile} />
<br />
<br />
<div>
<TreeView
className={classes.root}
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpanded={["root"]}
defaultExpandIcon={<ChevronRightIcon />}
>
{getData(data).map(renderTree)}
</TreeView>
</div>
</>
);
}