result not coming with d3js? - javascript

After lot of help from stackoverflow folks,finally resolved my json and now its looking good.
luck.json--->
{
"PERFECT_JSON_object":
{
"51b59c1bbae1c":
[
{ "id": "parties", "float_1": "0.006" , "float_2": "0.9"},
{ "id": "royal-challenge", "float_1": "0.02" , "float_2": "0.333" },
{ "id": "star-speak","float_1": "0.02","float_2":"0.1" }
],
"51b59c1bbae3c":
[
{ "id": "parties","float_1": "0.006" , "float_2": "0.9"},
{ "id": "star-speak","float_1": "0.02", "float_2": "0.009" }
],
"51b59c1bbae5c":
[
{ "id": "parties","float_1": "0.006" , "float_2": "0.9"}
]
}
}
I have been trying to get my head around d3js with json,and I must say I have progressed quite a bit.But I am still not able to get the output with json data.
I went through these link`s but dint help.
https://github.com/mbostock/d3/wiki/Requests
d3.js & json - simple sample code?
Access / process (nested) objects, arrays or JSON
MyFIDDLE with json(no output,something wrong in here)
same fiddle with some static values( without Json)--
This is the result that I want.
I know that d3.json method requires json file to be on server.For temporary basis,as the json file is small can we include it directly in a variable in our d3 script??
I think I am messing up with json data in a wrong way.Can somebody help me with it

Yes, you can just add the JSON in a variable and run it this way. See here for the updated jsfiddle. You basically just add your JSON after var data =.

Related

How to load icon for specific weather condition? (AngularJS)

I'm working on a weather app as a personal project. I have the bases of the app done where I make a HTTP get request to the Yahoo Weather API and it returns the data I want.
However I'm stuck on the next step, getting icons to load with the current conditions.
I setup a JSON file in my "models" folder and it looks like this:
[
{
"code": 32,
"icon": "img/sunny.png",
"text": "Sunny"
},
{
"code": 26,
"icon": "img/cloudy.png",
"text": "Cloudy"
}
]
And here's my request for that in my main controller (Not sure if I'm doing it right).
$http.get('models/conditions.json')
.success(function(data) {
vm.condition = data;
}).error(function(err) {
console.log(err);
});
In the view I'm using a combination of the ng-if and ng-src directives to try to load the icons. Again, I don't I'm doing it right.
<img ng-if="main.place.item.conditons.code === main.conditions.code" ng-src="{{main.conditions.icon}}">
Any ideas on how I can get this to work? Am I on the right track? Thanks for any answers!
You said the JSON is being retrieved correctly, so the problem lies in the fact that you are trying to use an array as an object with the ng-src tag. You have {{main.conditions.icon}}, assuming conditions is the JSON you retrieved, you must specify an array index, however, you probably don't want to do this because you don't have a way of knowing what index is related to what weather code.
The solution to this can come in a couple different ways. For one, if possible, you can alter the JSON data to simply be an object in the form:
{
"32": {
"icon": ...,
"text": ...
},
"26": {
"icon": ...,
"text": ...
}
}
If you are able to do this, then you can use conditions as an object and do:
<img ng-src="{{main.conditions[main.place.item.conditions.code].icon}}">
Of course, this is assuming the conditions property in the "main.place.item" object isn't also an array, if so you will have to adjust even further. Also, I am assuming you made a typo as you had conditions spelled wrong in your question with the ng-if attribute.

Json format issue in d3 pack layout

I am very new to d3. I have 3 days old d3 knowledge. I was trying to make one pack layout but I am not able to call translate(of transform) function based on the data in external json file. My json file is not formatted as name, children order (which has been used most of the examples). So, can any one clarify that whether we must have the json file in proper format like in tree structure to get the proper pack or tree layout. My json file format is:
{
"sourcefile":"Script",
"structure":{
"Links":[
[
"step1",
"port1",
"step2",
"port2"
],
[
"step3",
"port3",
"step4",
"port4"
]
],
"device":{
"step1":{
"args":{
"pin":[
"XXXX",
100
]
},
"device_type":"console"
},
"lock":{
"args":{
"username":[
"XXXX",
"test"
],
"address":[
"XXXX",
"10.0.0.1"
]
},
"device_type":"Light"
}
}
}
}
It it's true..I was wondering if anyone can tell me about some online tool to format this json file into the following format..
{
"name": "Names",
"children":
[
{ "name": "John", "size": 100 }
]
}
Your intuition is correct. The pack layout requires input data formatted as a hierachy. It seems unlikely that an online tool to convert general JSON data to this structure would exist, as such a tool would almost have to be custom-built for each particular data set. However, d3 itself has utility functions to help you to create the required structure. I'm referring to the Nest utilities. Looking at your input data, it's not at all obvious how to structure it in a hierarchy, so I can't offer any specific implementations suggestions. In general, though, I'd suggest transforming your data into a simple array of objects and then use the d3.nest utilities to extract the hierarchy from the data.

Deleting elements out of a json file without getting "null"

I have a JSON formatted text file that I'm using as kind of a database.
I read the file, use JSON.parse to turn it into an object, use delete on an element, then I JSON.stringifythe object and write it back to the file.
However the resulting file has "null" in the place where the object used to be, which isn't proper JSON, so my program will crash the next time the file is parsed. I don't like it.
How can I delete elements from my file without getting "null" where the element used to be?
Here's how I do it:
data = fs.readFileSync("./manifest/test.json");
contents=JSON.parse(data);
//some logic
delete contents.customers[i].files[j];
fs.writeFileSync("./manifest/test.json",JSON.stringify(contents,null,4));
And the resulting file before:
{
"customers": [
{
"customer": "test",
"files": [
{
"name": "test.flv",
"location": "cloudfront.url.com/check.flv"
}
]
}
]
}
And after:
{
"customers": [
{
"customer": "test",
"files": [
null
]
}
]
}
contacts.customers[i].files.splice(j, 1);
The result is still valid JSON though. JSON.parse should succeed. The error may lie elsewhere.

How to translate Solr JSON response into HTML while JSON is different every time

I am using Solr 4 for searching in a java web application.Solr produces a JSON response from which i have to extract search results and translate them into html so user can read that.
I know one solution but it seems dumb an I think there must be intelligent ideas.
{
"responseHeader": {
"status": 0,
"QTime": 0,
"params": {
"fl": "id,title",
"indent": "true",
"q": "solr",
"wt": "json"
}
},
"response": {
"numFound": 3,
"start": 0,
"docs": [
{
"id": "1",
"title": "Solr cookbook"
},
{
"id": "2",
"title": "Solr results"
},
{
"id": "3",
"title": "Solr perfect search"
}
]
}
}
After that i eval this text as:
var obj = eval ("(" + txt + ")");
To generate html page i can use either
<script>
document.getElementById("id").innerHTML = obj.response.docs[1].id
document.getElementById("title").innerHTML = obj.response.docs[1].title
</script>
or
document.write(obj.response.docs[1].id);
But limitation is that every time solr gives response with different object structure i.e. an object may have age feild but other can not have because it depends on query.
I want to use a sigle JSP page to display search results(like Google)
for all search queries
is it possible to write a single code segment which works for any possible search results with different schema.
Javascript stops working after encountering any error which is likely in my case. that's also problem.if I use for loop to traverse the object hierarchy it is highly error -prone.
Is it possible with a single view page Thanks.
You might want to consider using ajax-solr - A JavaScript framework for creating user interfaces to Solr
I suggest using Velocity templating which is readily supported in Solr - instead of extracting data from the JSON and rendering the HTML via JS.
Docs here

Adding data to jQuery-Flexigrid without ajax-request

I want to save some unneeded requests and time for displaying a table the first time and so I thought maybe I could set the initial data directly without any ajax-request. I tried it like that:
$('#testTable').flexAddData('[formatted json here]');
and also that
$('#testTable').addData('[formatted json here]');
But it hasn't any effect. Can I do that and what is the right syntax?
I've also met this problem and spent a lot of time trying to solve it. Solution in my case was pretty simple. You just need to specify dataType : "json" obviously in flexigrid() function. Default dataType is XML. So, it don't want to understand JSON:
$("#myTable").flexigrid({dataType : "json"});
Did you use the eval()?
$("#testTable").flexAddData(eval('[formatted json here]'));
or try
$("#testTable").flexAddData(eval('[formatted json here]')).flexReload();
hope this helps
To supplement Anwar and user1635430 answers, here is an example JSON code:
{
"page": "1",
"total": "9",
"rows": [
{
"id": "1",
"cell": [
"1",
"text1",
"user1",
"date1"
]
}
]
}
The code is done by Anwar, I "stole" it from his answer on some other question.

Categories

Resources