JSON

[tobeyt23]

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]

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]

I am using the json_encode.

[rhodesa]

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]

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]

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

[RichardRotterdam]

because your json is not an array yet its a string

[tobeyt23]

Well it does the samething

[RichardRotterdam]

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?

<script> scr="mootools.js"</script>

 

that should solve your problem

 

or use this to decode your json

 

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

[tobeyt23]

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]

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]

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

[rhodesa]

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]

ok youre right it it is a set of objects

[tobeyt23]

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]

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]

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]

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

[tobeyt23]

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.