Jump to content
MakeWebGames

JQuery/JSON


KyleMassacre

Recommended Posts

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?

Link to comment
Share on other sites

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 by HauntedDawg
Link to comment
Share on other sites

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 by KyleMassacre
Link to comment
Share on other sites

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);

});
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...