I need to build a treeview from an XML file. I don't want to use AJAX, as I can simply read the file from my disk (I'm building this app on Electron)
fs.readFile('./xmlfile.xml', function(err, data) {};
Is there anyone that could guide me how to build a tree of an custom made XML file? Basically I'd like to be able to build a tree from any XML data I put into my file.
I've already tried using JStree, but I keep having the same issue with it - it doesn't spit any errors in the console and prints a blank page.
testData is where keep my xmlfile.xml (file is definetely valid and it prints correctly when I put it through console log)
$(document).ready(function() {
// NeDB - Database init
var Datastore = require('nedb');
var fs = require('fs');
fs.readFile('./xmlfile.xml', function(err, testData) {
$('#cRIO_tree')
.jstree({
"core": {
"animation": 0,
"check_callback": true,
"icon": "../assets/tree.png",
"themes": {
"stripes": true
},
"xml_data": {
"data": testData,
"progressive_render": "true"
},
},
"dnd": {
"always_copy": true
},
"types": {
"#": {
"max_children": 1,
"max_depth": 10,
"valid_children": ["root"]
},
"root": {
"valid_children": ["default"]
},
"default": {
"icon": "glyphicon glyphicon-tree-deciduous",
"valid_children": ["default", "file"]
},
"file": {
"icon": "glyphicon glyphicon-flash",
"valid_children": []
}
},
"plugins": ["contextmenu", "dnd", "search", "state", "types",
"sort", "wholerow", "themes", "xml_data"]
})
}
}
Problem is that no matter what I put into my xml - it simply doesn't print it. I even tried examples from
https://old.jstree.com/documentation/xml_data
<!-- FLAT -->
<root>
<item id="root_1" parent_id="0" state="closed">
<content>
<name><![CDATA[Node 1]]></name>
</content>
</item>
<item id="node_2" parent_id="root_1">
<content>
<name><![CDATA[Node 2]]></name>
</content>
</item>
</root>
and that doesn't seem to be working..
Related
// JSON File
{
"project": [
{
"id": "0",
"title": "Old Portfolio",
"images" :{
"main": "portfolio.png",
"second": ""
},
"content": ["This is one of my first few projects I made as a beginner", "At this project, I learned using JavaScript for making interactive elements like a navbar button. This project was not really something I'm proud of. Hence why I'm making a new portfolio but now with react"]
,
"tags": ["HTML5", "CSS", "JavaScript", "jQuery"]
},
{
"id": "1",
"title": "Twitter Clone",
"images" :{
"main": "twitter_clone.png",
"second": ""
},
"content": ["Project I made to improve my skills in PHP and MySQL.", "At this project, I used MySQL to store data and use PHP to alter what my website will show to the user. I've also used AJAX and JQuery for processing data from MySQL with PHP."]
,
"tags": ["HTML5", "CSS", "JavaScript", "PHP", "MySQL", "jQuery", "AJAX"]
}
]
}
// projectList is from a JSON file
// ProjectList.js
{projectList.map((project) => (
<Projects key={project.id} projectData={project}/>
))}
// Projects.js
const imagePath = "../images/";
const mainImage = imagePath + projectData.images.main
const Projects = ({projectData}) => {
<img style={{
width: "100%",
}} src={mainImage}alt="" />
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I have a JSON file that stores the images. This is gonna be for a list of projects.
The image src is not working and I can't import an image inside the function.
I hope someone could help I am new to React
JSON should not be object, I guess in this case you can use array.
instead of using "img" you must use thumbnail, cause your object(project) has no "img" key, but has "thumbnail"->
const mainImage = imagePath + projectData.thumbnail.main
// JSON File
[
{
"id": "0",
"title": "Old Portfolio",
"thumbnail" :{
"main": "portfolio.png",
"second": ""
},
"content": ["This is one of my first few project I made as a beginner", "At this project I learned using JavaScript for making interactive elements like a navbar button. This project was not really something I'm proud of. Hence why I'm making a new portfolion but now with react"]
,
"tags": ["HTML5", "CSS", "JavaScript", "jQuery"]
},
{
"id": "1",
"title": "Twitter Clone",
"thumbnail" :{
"main": "twitter_clone.png",
"second": ""
},
"content": ["Project I made to improve my skills in PHP and MySQL.", "At this project I used MySQL to store data and use PHP to alter what my website will show to the user. I've also used AJAX and JQuery for processing data from MySQL with PHP."]
,
"tags": ["HTML5", "CSS", "JavaScript", "PHP", "MySQL", "jQuery", "AJAX"]
}
]
// projectList is from a JSON file
// ProjectList.js
{projectList.map((project) => (
<Projects key={project.id} projectData={project}/>
))}
// Projects.js
const imagePath = "../images/";
const mainImage = imagePath + projectData.thumbnail.main
const Projects = ({projectData}) => {
<img style={{
width: "100%",
}} src={mainImage}alt="" />
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I finally found a way,
I put the images on the public folder "public/images/image.png"
and
const Projects = ({projectData}) => {
<img src={`images/${projectData.images.main}`}/>
}
So I am trying to mimic a data visualization example code from cytoscape library and add links to the nodes of the data.
Here is the example
http://js.cytoscape.org/demos/cose-layout/
Here is the code associated with the example
https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/cose-layout
In the code on github there is the data.json file and example of a node looks like this
[{
"data": {
"id": "605755",
"idInt": 605755,
"name": "PCNA",
"score": 0.006769776522008331,
"query": true,
"gene": true
},
"position": {
"x": 481.0169597039117,
"y": 384.8210888234145
},
"group": "nodes",
"removed": false,
"selected": false,
"selectable": true,
"locked": false,
"grabbed": false,
"grabbable": true,
"classes": "fn10273 fn6944 fn9471 fn10569 fn8023 fn6956 fn6935 fn8147 fn6939 fn6936 fn6629 fn7928 fn6947 fn8612 fn6957 fn8786 fn6246 fn9367 fn6945 fn6946 fn10024 fn10022 fn6811 fn9361 fn6279 fn6278 fn8569 fn7641 fn8568 fn6943"
},
I tried adding
"links": {
"self": { "href": "https://www.google.com" }
},
and variations of "links": something but no dice.
I was like okay maybe I can take the ID and add a link via javascript but I haven't been successful.
$('#605755').dataTable( {
"columnDefs": [ {
"data": "download_link",
"render": function ( data, type, full, meta ) {
return '';
}
} ]
} );
I am wondering if this is possible to add it in the JSON file directly and just link to external sites without the javascript. When I open the inspect it basically just shows a canvas with no way to access what's inside the canvas it seems like.
I am definitely new to JSON so any help in the right direction would be greatly appreciated.
Yes sure you can do this use fnDrawCallback
fnDrawCallback: function( oSettings,data,index ){
$('.linkClassName').on('click', function(event){
// do whatever u want
});
}
And add class Name to your link
$('#605755').dataTable( {
"columnDefs": [ {
"data": "download_link",
"render": function ( data, type, full, meta ) {
return '<a class="linkClassName" href="https://www.google.com">data</a>';
}
} ]
} );
I am trying to print autocompletion of a js file using nodejs and tern.
Ternjs has the worst documentation i have ever seen.
var tern = require("tern")
var ternServer = new tern.Server({})
var requestDetails = {
"query": {
"type": "completions",
"file": "myfile.js",
"end": {"line":0,"ch":3},
"types":true,
"includeKeywords":true,
"sort":true,
"guess":true,
"docs":true,
"urls":true,
"origins":true,
"lineCharPositions":true,
"caseInsensitive":true
},
"files": [
{
"type": "full",
"name": "myfile.js",
"text": 'req'
}
]
}
ternServer.request(requestDetails, function(error, success){
console.log(success);
});
Its not working though if I use con it provided continue and const. But not after that. While in atom plugin it provided require module autocomplete. Am i missing something.
Also this is the .tern-project file
{
"ecmaVersion": 6,
"libs": [
"browser",
"jquery",
"requirejs",
"commonjs"
],
"plugins": {
"complete_strings": {
"maxLength": 15
},
"node": {},
"lint": {},
"doc_comment": {
"fullDocs": true,
"strong": true
}
}
}
The autocomplete libraries are not loaded when you start the server in this way. Simply defining them in the .tern_project file doesn't seem to work.
If you start the server using node_modules/tern/bin/tern, you'll get a port then you can successfully POST a request and get the completions that way.
curl -H "Content-Type:e": "completions","file": "myfile.js","end": {"line":0,"ch":3},"types":true,"includeKeywords":true,"sort":true,"guess":true,"docs":true,"urls":true,"origins":true,"lineCharPositions":true,"caseInsensitive":true},"files": [{"type": "full","name": "myfile.js","text": "req"}]}' http://localhost:[PORT]
If that doesn't work for you, you can manually add the def files like so.
var tern = require("tern");
var fs = require("fs");
var ternServer = new tern.Server({ "async": true, "defs": findDefs()})
var requestDetails = {
"query": {
"type": "completions",
"file": "myfile.js",
"end": { "line": 0, "ch": 3 },
"types": true,
"includeKeywords": true,
"sort": true,
"guess": true,
"docs": true,
"urls": true,
"origins": true,
"lineCharPositions": true,
"caseInsensitive": true,
},
"files": [{
"type": "full",
"name": "myfile.js",
"text": 'req'
}]
}
ternServer.request(requestDetails, function(error, success) {
console.log(success);
});
function findDefs() {
var defs = [];
defs.push(JSON.parse(fs.readFileSync("node_modules/tern/defs/ecmascript.json", "utf8")));
defs.push(JSON.parse(fs.readFileSync("node_modules/tern/defs/browser.json", "utf8")));
defs.push(JSON.parse(fs.readFileSync("node_modules/tern/defs/jquery.json", "utf8")));
defs.push(JSON.parse(fs.readFileSync("node_modules/tern/defs/underscore.json", "utf8")));
return defs;
}
If you start the server using node_modules/tern/bin/tern, it will show a port then you can successfully POST a request and get the result.
curl -H "Content-Type:e": "completions","file": "myfile.js","end": {"line":0,"ch":3},"types":true,"includeKeywords":true,"sort":true,"guess":true,"docs":true,"urls":true,"origins":true,"lineCharPositions":true,"caseInsensitive":true},"files": [{"type": "full","name": "myfile.js","text": "req"}]}' http://localhost:[PORT]
I'm trying to create a Extjs tree with JSON data. The data I want to load into the tree contains a folder structure. But when I trie to load the data into the tree, it doesn't show anything.
I have checked the json code here (JSONLint) on errors but everythin looks fine. Which would say that the problem probably is in the extjs part.
I have no idea how to get it works.
I have created a JSON-object like this:
{
"folders": [
{
"name": "Function",
"id": "workspace://SpacesStore/000-000-000",
"folders": [
{
"name": "Evaluation reports",
"id": "workspace://SpacesStore/00-00-4949-9caf-6655fg"
},
{
"name": "Function Reports",
"id": "workspace://SpacesStore/554gg-563-sd555-872e-0098hhjf"
},
{
"name": "Training(POP)",
"id": "workspace://SpacesStore/4334g-67hj-4357-ba96-4343fhj343"
}
]
},
{
"name": "Application data",
"id": "workspace://SpacesStore/3434gg-a761-48a2-83fa-3434f454hu",
"folders": [
{
"name": "Application letters",
"id": "workspace://SpacesStore/23232ff-c95f-4999-sdsd556-00886ggh7765"
}
]
}
]
}
This is the Extjs part where I want to load the JSON data:
initComponent: function() {
// declare a new store and load tree data
this.store = new Ext.data.TreeStore({
// set params
proxy: {
type: 'ajax',
reader: 'json',
url: 'http://localhost:8080/testApp/rest/folder/1'
}
});
this.items = [{
flex: 1
}];
this.callParent();
}
You didn't tell the reader what property to read from:
reader: {
type: 'json',
rootProperty: 'folders'
}
I'm using node-log4js.
(it's log4JS, not log4J!)
I thought of the loggers 'categories' to be just like the Strings you put in Log4J into the constructor of a logger (normally you put your fqn class name there), so that log4j can put logged things to the right location.
I got the following config:
{
"appenders": [
{
"type": "console",
},
{
"type": "file",
"absolute": true,
"filename": "/tmp/app.log",
"maxLogSize": 20480,
"backups": 10
},
{
"type": "console",
"category": "app.access"
}
]
}
The desired behaviour would be that all "app.access" stuff only goes to the last appender (which is, at the moment, the console, too, but could change in future). At the moment, all loggings with the category 'app.access' will be logged twice to console and once to file.
Is there a way to give those other two appenders a "all but app.access"-category? How?
Thank you very much in advance
I had a similar requirement. I wanted to exclude a bunch of categories from the console logger.
I wrote something based on the logLevelFilter, which I called categoryFilter.
categoryFilter.js:
"use strict";
var log4js = require('log4js');
function categoryFilter (excludeCategories, appender) {
return function(logEvent) {
if (excludeCategories.every(function(x){return (x!=logEvent.category);})) {
appender(logEvent);
}
};
}
function configure(config) {
log4js.loadAppender(config.appender.type);
var appender = log4js.appenderMakers[config.appender.type](config.appender);
return categoryFilter(config.exclude, appender);
}
exports.appender = categoryFilter;
exports.configure = configure;
To use it, I have this snippet near the beginning of my app:
var log4js = require('log4js');
log4js.loadAppender('categoryFilter',require('./src/categoryFilter'));
log4js.configure('log4js-conf.js');
My configuration file has the following:
{
"appenders": [
{
"type": "file",
"filename": "logs/logfile.log",
"maxLogSize": 20480,
"backups": 3
},
{
"type": "categoryFilter",
"exclude":["results"],
"appender":{
"type": "console"
}
},
],
"replaceConsole":true
}
I'd be interested in your thoughts.
I faced a similar problem and here's how I resolved it - using the levels.
Used the following config file:
{
"appenders": [
{
"type": "logLevelFilter",
"level": "INFO",
"appender": {
"type": "console",
"layout": {
"type": "colored",
"pattern": "[%d] %-5p <%c> %m"
}
}
},
{
"type": "console",
"layout": {
"type": "messagePassThrough"
},
"category": "raw"
}
]
}
The use 2 different log4js instances as follows:
var path = require('path');
var log4js = require('log4js');
log4js.configure('log4js.json');
var log = log4js.getLogger(path.basename(__filename));
var raw = log4js.getLogger('raw');
In your code use log.info(), log.warn(), log.error() or log.fatal() to have standard logs such as:
[2015-01-12 19:37:19.931] [INFO] app.js - app started
[2015-01-12 19:38:52.484] [ERROR] other.js - Error. failed to open file
Same logs above would look like this using raw.trace():
app started
Error. failed to open file
I'm using it to highlight different situations in the console. It is important to me to have it look totally different so I will notice these events. But when it is logged to a file, I don't mind if it has the timestamp (since it actually helps when looking back in time). Therefore I also have the following appender in the log4js.json file:
{
"type": "file",
"filename": "app.log",
"maxLogSize": 1048576,
"backups": 10,
"layout": {
"type": "pattern",
"pattern": "[%d] %-5p <%c> %m"
}
}
Hope this help! :)
Just assign top two appenders to a different category than "app.access" and use that category in getLogger.