JSON

tobeyt23 · May 21, 2008

I am trying to output my JSON array to the screen but am having a horrible time doing so. Here is my JSON array, how can I send this to the browser in a readable format?

{"May 2008":{"New":{"Total":"163","Customer_List":["94262","94612","95002","95382","93912","94292","94662"

,"95032","95602","93622","93942","94332","95062","93652","93972","94372","94732","95092","95662","93682"

,"94012","94402","94762","76285","93712","94042","94432","95172","93742","94082","94462","94832","95212"

,"94112","94492","94872","95242","95432","93802","94172","94532","94912","76025","95472","93832","94202"

,"94562","95312","95512","93862","94232","94592","95352","95552","93892","94272","94622","76115","95582"

,"93922","94302","94672","95042","95612","93632","93952","94342","94712","95072","95642","93662","93982"

,"94382","94742","95672","93692","94412","94782","95152","95692","93722","94062","94442","94812","95182"

,"93752","94092","94472","94842","95222","75975","95412","93782","94502","94882","95252","95442","93812"

,"94182","94542","94922","76035","95492","93842","94212","94572","95322","93872","94242","94602","94992"

,"93902","94282","94642","95022","95592","93932","94312","94692","95052","75835","95622","93642","93962"

,"94352","94722","95082","95652","93672","93992","94392","94752","95122","76275","93702","94422","94792"

,"95162","93732","94072","94452","94822","95202","95392","93762","94102","94482","94862","93792","94162"

,"94512","94902","95262","95462","94552","95302","95502","93852","94222","94582","94972","95342","95542"

]},"Used":{"Total":"69","Customer_List":["93882","76105","95572","75815","76135","94702","75845","76165"

,"95632","75875","76195","95142","75905","76225","94802","75935","76255","75965","95402","93772","75995"

,"95272","94942","76055","94982","76085","95012","75795","75825","76145","75855","76175","95102","75885"

,"76205","94022","75915","76235","75945","76265","94142","76005","95292","94952","76065","95522","95362"

,"76095","95562","75805","76125","76155","75865","76185","75895","76215","94032","75925","76245","75955"

,"95232","75985","95422","76015","93822","94192","94932","76045","76075"]},"Group_Total":{"Total":"232"

,"Customer_List":["94262","94612","95002","95382","93912","94292","94662","95032","95602","93622","93942"

,"94332","95062","93652","93972","94372","94732","95092","95662","93682","94012","94402","94762","76285"

,"93712","94042","94432","95172","93742","94082","94462","94832","95212","94112","94492","94872","95242"

,"95432","93802","94172","94532","94912","76025","95472","93832","94202","94562","95312","95512","93862"

,"94232","94592","95352","95552","93892","94272","94622","76115","95582","93922","94302","94672","95042"

,"95612","93632","93952","94342","94712","95072","95642","93662","93982","94382","94742","95672","93692"

,"94412","94782","95152","95692","93722","94062","94442","94812","95182","93752","94092","94472","94842"

,"95222","75975","95412","93782","94502","94882","95252","95442","93812","94182","94542","94922","76035"

,"95492","93842","94212","94572","95322","93872","94242","94602","94992","93902","94282","94642","95022"

,"95592","93932","94312","94692","95052","75835","95622","93642","93962","94352","94722","95082","95652"

,"93672","93992","94392","94752","95122","76275","93702","94422","94792","95162","93732","94072","94452"

,"94822","95202","95392","93762","94102","94482","94862","93792","94162","94512","94902","95262","95462"

,"94552","95302","95502","93852","94222","94582","94972","95342","95542","93882","76105","95572","75815"

,"76135","94702","75845","76165","95632","75875","76195","95142","75905","76225","94802","75935","76255"

,"75965","95402","93772","75995","95272","94942","76055","94982","76085","95012","75795","75825","76145"

,"75855","76175","95102","75885","76205","94022","75915","76235","75945","76265","94142","76005","95292"

,"94952","76065","95522","95362","76095","95562","75805","76125","76155","75865","76185","75895","76215"

,"94032","75925","76245","75955","95232","75985","95422","76015","93822","94192","94932","76045","76075"

]}},"Group_Total":{"Group_Total":{"Total":"232","Customer_List":["94262","94612","95002","95382","93912"

,"94292","94662","95032","95602","93622","93942","94332","95062","93652","93972","94372","94732","95092"

,"95662","93682","94012","94402","94762","76285","93712","94042","94432","95172","93742","94082","94462"

,"94832","95212","94112","94492","94872","95242","95432","93802","94172","94532","94912","76025","95472"

,"93832","94202","94562","95312","95512","93862","94232","94592","95352","95552","93892","94272","94622"

,"76115","95582","93922","94302","94672","95042","95612","93632","93952","94342","94712","95072","95642"

,"93662","93982","94382","94742","95672","93692","94412","94782","95152","95692","93722","94062","94442"

,"94812","95182","93752","94092","94472","94842","95222","75975","95412","93782","94502","94882","95252"

,"95442","93812","94182","94542","94922","76035","95492","93842","94212","94572","95322","93872","94242"

,"94602","94992","93902","94282","94642","95022","95592","93932","94312","94692","95052","75835","95622"

,"93642","93962","94352","94722","95082","95652","93672","93992","94392","94752","95122","76275","93702"

,"94422","94792","95162","93732","94072","94452","94822","95202","95392","93762","94102","94482","94862"

,"93792","94162","94512","94902","95262","95462","94552","95302","95502","93852","94222","94582","94972"

,"95342","95542","93882","76105","95572","75815","76135","94702","75845","76165","95632","75875","76195"

,"95142","75905","76225","94802","75935","76255","75965","95402","93772","75995","95272","94942","76055"

,"94982","76085","95012","75795","75825","76145","75855","76175","95102","75885","76205","94022","75915"

,"76235","75945","76265","94142","76005","95292","94952","76065","95522","95362","76095","95562","75805"

,"76125","76155","75865","76185","75895","76215","94032","75925","76245","75955","95232","75985","95422"

,"76015","93822","94192","94932","76045","76075"]}}}

Here is the JS:

var summary= 
{
		load: function(id)
		{
			if(php.smart_empty(id))
				return false;
			utils.loading_icon(true);

			ajax.get('/reports/leads_by_month?id='+id,'',false,"summary.display(r,'leads_by_month');");
			ajax.get('/reports/leads_by_customer_type?id='+id,'',false,"summary.display(r,'leads_by_customer');utils.remove_loading_icon(true);");
		},

		display: function(obj,section)
		{
			d = document.getElementById(section);

			var s=new Array();
			for(var key in obj)
				s[s.length]=''+key+':'+obj[key];

			if(s.length>0)
			{
				d.innerHTML=''+s.join(', ')+'';
			}
		}
}; //end of class

this is what i am getting:

May 2008:[object Object], Group_Total:[object Object]

Internet:[object Object], Phone-Up:[object Object], Previous Customer:[object Object], Walk-In:[object Object], Group_Total:[object Object]

RichardRotterdam · May 21, 2008

do you know this php function

json_encode($phpArray);

it creates a array in string format now you need to decode to a usable javascript array

this is how it works with the mootools frame work its probably very similar in prototype

var jsArray = Json.evaluate(jsonData);

http://docs.mootools.net/Remote/Json.js

I recommend using a javascript framework (such as prototype,mootools,jQuery or Dojo)since it usually has json functionality

tobeyt23 · May 21, 2008

I am using the json_encode.

rhodesa · May 21, 2008

There really is no way to print it out all pretty like PHP would with something like print_r().

You have to do your own recursive loops. Try something like this:

<script type="text/javascript">
function json2html ( obj ) {
  var html = '<ul>';
  for(var key in obj){
    html += '<li>';
    if(obj.constructor != Array)
      html += '<b>'+key+':</b> ';
    if(typeof obj[key] == 'object'){
      html += json2html(obj[key]);
    }else
      html += obj[key];
    html += '</li>';
  }
  return html + '</ul>';
}
document.write(json2html(obj));
</script>

RichardRotterdam · May 21, 2008

like i said in the second part of the reply you need to decode the json array to a usable javascript array. because the json is in a string format.

lets say your jsonstring looks like you posted

<script>
var jsonData="{"May 2008":{"New":{"Total":"163","Customer_List":["94262","94612","95002","95382","93912","94292","94662"

etc....";
</script>
<script>
or probably like you are doing
var jsonData='<?php echo(json_encode($phpArray));?>';
</script>

now you need to decode it to a usable array like so

<script>
//decode data
var jsArray = Json.evaluate(jsonData);
</script>

now you have a usable javascript array you can loop through

tobeyt23 · May 21, 2008

I'd tried your recursive loops and it still doesn't return everything.

RichardRotterdam · May 21, 2008

because your json is not an array yet its a string

tobeyt23 · May 21, 2008

Well it does the samething

RichardRotterdam · May 21, 2008

this is what i get when i combine the function on the decoded json to jsarray

# May 2008:

* New:

o Total: 163

o Customer_List:

+ 94262

+ 94612

+ 95002

+ 95382

have you included the mootools script?

that should solve your problem

or use this to decode your json

http://www.devpro.it/JSON/files/JSON-js.html

tobeyt23 · May 21, 2008

That is why i am not using nor do i want to use mootools or any other, this can and has been done with out them.

rhodesa · May 21, 2008

Do you have a copy of the page I can load in my browser? Or can you post the complete code for everything. It's tough to find your error without a copy I can load in my browser.

RichardRotterdam · May 21, 2008

sure it can be done without mootools or the json.js include if you want to build youre own json decode function

rhodesa · May 21, 2008

there is no need for a json_decode...by the time it hits "display: function(obj,section)", obj is an object NOT A STRING

RichardRotterdam · May 21, 2008

ok youre right it it is a set of objects

tobeyt23 · May 21, 2008

here is my update code:

var summary= 
{
		load: function(id)
		{
			if(php.smart_empty(id))
				return false;
			utils.loading_icon(true);

			ajax.get('/reports/leads_by_month?id='+id,'',false,"summary.json2html(r,'leads_by_month_data');");
		},

		json2html: function(obj,section) 
		{
  				var html = '<ul>';
  				for(var key in obj)
  				{
    				html += '<li>';
    				if(obj.constructor != Array)
     					 html += '<b>'+key+':</b> ';
    				if(typeof obj[key] == 'object')
    				{
      					html += summary.json2html(obj[key],section);
    				}
    				else
      					html += obj[key];
   					html += '</li>';
			}
  				html += '</ul>';
  				d = document.getElementById(section);
			d.innerHTML=''+html+'';		
  				utils.remove_loading_icon(true);
		}
}; //end of class

this is what i now get:

Leads by Month

* May 2008: undefined

* Group_Total: undefined

think i am overwriting them?

rhodesa · May 21, 2008

Try this...

var summary= 
{
		load: function(id)
		{
			if(php.smart_empty(id))
				return false;
			utils.loading_icon(true);

			ajax.get('/reports/leads_by_month?id='+id,'',false,"summary.json2html(r,'leads_by_month_data');");
		},

		display: function(obj,section)
		{
			document.getElementById(section).innerHTML = summary.json2html(obj);
		},

		json2html: function(obj) 
		{
			var html = '<ul>';
			for(var key in obj){
				html += '<li>';
				if(obj.constructor != Array)
					html += '<b>'+key+':</b> ';
				if(typeof obj[key] == 'object')
					html += summary.json2html(obj[key]);
				else
					html += obj[key];
				html += '</li>';
			}
			return html + '</ul>';
		}
}; //end of class

tobeyt23 · May 21, 2008

That works, just had to change json2html to display in the ajax.get. But Thank you, is there a way to lay this out into a table?

rhodesa · May 22, 2008

Of course, you have to decide how you want it to look, then tweak those loops to display it as tables.

tobeyt23 · May 27, 2008

Ok i am new to JSON and am struggling with getting this to look the way I would like. I would like to be able to pull actually just what I want out and format it into a nice table layout. When this comes out now I am getting a customer list which I don't want. For example I the leads_by_month I just want the month, new and its total, used and its total and the total of used and new. Any help or suggestion would be greatly appreciated.

Sign In

JSON

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information