JQuery/JSON

[KyleMassacre]

So first of all I am not very good and JQuery at all but what I am trying to do is grab some JSON data and I would like to put that data in a chart. The problem that I have is that I need to kind of iterate through the indexes of the arrays to get the data that I wish to display. Currently I am on my phone and don't have access to the way I tried it exactly but I will attempt to do it in pseudo code but get it as close as possible.

I don't have issues retrieving the JSON but since it's in an array with indexes I am looping through and its trying to display the chart x.length amount of times. So here is a small example of the JSON response:

[  
 {      
   "result":
   {
     "0":
     {
       "results":
       {
         "id":"1",
         "date":"2014-11-20",
         "site_id":"http:\/\/someurl.com",
         "count":"1"
       }
     },//......More indexes are here        
   }
 }
]

Land for the JQuery portion of it I tried using $.each() something like this:

$.each(data.result,function(i) {
   var json = data.result[i].results;
   var chartData = [
       {/*my JSON data in here*\},
   ];
});

My JSON data is inside the success function inside the $.ajax() call using "json" as the datatype. My issue is that I can't get my chartData array to use in the chart because it's saying it is undefined. What n00bish mistake am I making here?

[HauntedDawg]

jsFiddle

Your json return data (or your psuedo json is wrong).

 

{
"result":[
	{
		'id': 1,
		'date': '2014-12-10',
		'site_id': 'http://someurl.com',
		'count': 1
	},
	{
		'id': 2,
		'date': '2014-12-03',
		'site_id': 'http://someurl2.com',
		'count': 52
	},
	// More results go here
]
}

 

Also, by adding a secondary argument to the $.each function, you can then extract the data by using the second argument while the first remains the index.

 

$.each(data.result, function(a, i) {

var json = i; // Since we no longer need to target the main array anymore

   var chartData = ''; // Depending how this array/object is built, i would suggest reading up on writing json strings

});

Edited December 10, 2014 by HauntedDawg

[Dayo]

When looping through objects i prefer the for method i.e.

[js]for (var obj in data.result) {

chartData[chartData.length] = data.result[obj].results;

}[/js]

[KyleMassacre]

Thanks @Dayo and @HauntedDawg. I will try these out when I get home but I am kind of skeptical about because:

For HD's response, that is basically what I did. I didn't have a problem grabbing the data and I can alert it or log it but my issue is using that data in the charts method. Similar to this:

Morris.Bar({  
   element: 'graph',  
   data: [
       {x: '2011 Q1', y: 3, z: 2, a: 3},
       {x: '2011 Q2', y: 2, z: null, a: 1},
       {x: '2011 Q3', y: 0, z: 2, a: 4},
       {x: '2011 Q4', y: 2, z: 4, a: 3}
   ],
   xkey: 'x',
   ykeys: ['y', 'z', 'a'],
   labels: ['Y', 'Z', 'A']}).on('click', function(i, row)
   {
       console.log(i, row);
});

formatted like arse but I'm once again on my phone.

And for Dayo's I just don't understand lol.

Like I said, I'm pretty garbage at this but I can't access the data variable outside the loop but if I put the chart method in the loop it wants to print that chart a grip of times

Edited December 10, 2014 by KyleMassacre

[HauntedDawg]

It looks like what you are wanting to do is create a global array and then populate that inside the loop to later use in the morris bar object:

 

var chartData = []; // Holds our data for the chart

/* Do ajax stuffs here */

// Loop through the data from the ajax
$.each(data.result, function(a, i) {

chartData.push({x: i.date, y: i.count}); // Push values into array

});

console.log(chartData);

Morris.Bar({
element: 'graph', 
data: chartData,
xkey: 'x',
ykeys: ['y', 'z', 'a'],
labels: ['Y', 'Z', 'A']
}).on('click', function(i, row) {

console.log(i, row);

});

[KyleMassacre]

Ahh that looks like it makes more sense. Thanks a million

[KyleMassacre]

Just wanted to give an update!!!

This worked great HD

[HauntedDawg]

Post up your final result so others that may have the same issue can see.

Glad its resolved :)

[KyleMassacre]

That was pretty much what I was looking for so not much has changed between yours and mine , I didn't do anything fancy besides some options I used which is found here:

http://morrisjs.github.io/morris.js/lines.html