CODEWITHSUNDEEP
javascriptjqueryajaxjson
user3248233
user3248233

Reputation: 221

How to import json file to javascript to make a graph

I want to pass this test.json file to (var treeData) in javascript file 

{"name" : "Conrad", "info" : "tst", "children" : [
        {"name" : "Rick" },
        {"name" : "Lynn" },
        {"name" : "John", "children": [
                {"name" : "Dave", "children": [
                        {"name" : "Dave" },
                        {"name" : "Chris" }      
                ]},
                {"name" : "Chris" }
        ]}
]};

file location is : C:\Users\Bubee\Desktop\Paser Tree\codepen_DjKIa\test.json

I already have a graph code 

// Create a svg canvas
var vis = d3.select("#viz").append("svg:svg")
.attr("width", 400)
.attr("height", 300)
.append("svg:g")
.attr("transform", "translate(40, 0)"); // shift everything to the right

// Create a tree "canvas"
var tree = d3.layout.tree()
.size([300,150]);

var diagonal = d3.svg.diagonal()
// change x and y (for the left to right tree)
.projection(function(d) { return [d.y, d.x]; });

// Preparing the data for the tree layout, convert data into an array of nodes
var nodes = tree.nodes(treeData);
// Create an array with all the links
var links = tree.links(nodes);

console.log(treeData)
console.log(nodes)
console.log(links)

var link = vis.selectAll("pathlink")
.data(links)
.enter().append("svg:path")
.attr("class", "link")
.attr("d", diagonal)

var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("svg:g")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

// Add the dot at every node
node.append("svg:circle")
.attr("r", 3.5);

// place the name atribute left or right depending if children
node.append("svg:text")
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; })});

but when I import this code

var treeData = {};
$.ajax({
    type: "GET",
    url: "C:\Users\Bubee\Desktop\Paser Tree\codepen_DjKIa\test.json", //or path to JSON file
    dataType: 'json'
}).done(function(data) {
    treeData = data;
}).fail(function(jqXHR, textStatus) {
    //catch any error here
    console.log("error" );
});

It have only point

help me please thanks

Upvotes: 1

Views: 576

Answers (1)

soyuka
soyuka

Reputation: 9105

See http://api.jquery.com/jQuery.getJSON/ :

$.getJSON( "ajax/test.json", function( data ) {
    console.log(data);
    treeData = data;
    //Continue here, this is asynchronous !
});

Upvotes: 1

Related Questions