Iterate through JSON data like a multi-d array?/Show all fields/vals for clicked row?

Joseph_Sliker

Hi; My head hurts. I am not quite getting this JSON object stuff.

Three goals here:
1. Run a MySQL query and return the results in JSON
(I can do this...it seems to work fine)

show a table that shows short/summary CLICKABLE record rows (that show just a couple of the fields for each of the JSON rows/elements) ...
(I've actually figured out this first part and it seems to work fine)
The result of clicking on a specific row (in the table refered to above) results a display in a table/form being shown that will show ALL fields/values for that specific, clicked record.
When I click a row, the row ID does magically appear in the <span> tags located above the summary table.
(THIS IS WHERE I AM STUCK...instead of just seeing that number, I want to see all available details for that specific record/row)

[I can do all of this stuff in php with sessions, and arrays and forms and all that good stuff...but I would like to understand how to do this in javascript/client-side in order to make use of the page more efficient]

Here is the code that seems to be working fine to accomplish steps 1 and 2.
My offerdata.js file:

$(document).ready(function() {	
$.getJSON('offerdata.php', function(data) {//a summary table that shows, say, 4 out of 12 fields that exist in JSON for each row
      var table='<table>'; 
      	 table+='<tr><th>OFFER_ID</th><th>PROPERTY</th><th>STAFF</th><th>OFFER_STATUS</th></tr><tbody class="hrow">';   

      $.each(data, function(index, item){
	 table+='<tr valign="top"onclick="selectRow(this)" id="'+index+'"><td>'+item.OFFER_ID+'</td><td>'+item.PROPERTY+'</td><td>'+item.STAFF+'</td><td>'+item.OFFER_STATUS+'</td></tr>';
       });
      table+='</tbody></table>';
      $("#content").html(table);	//refer to this id in <table> tags back at the page 
});	
});

and back in the <body> of the page, I have this:

<span id="offer_id"></span><hr />
<!-- I would like to have a details table to appear here when any row is clicked (all details for that row)  ie. for each field that exists in the JSON for that selected row <tr><th>$fld</th><td>$val</td></tr> --->
<table id="content"></table>

I am assuming, because I CAN see my summary table, that the complete JSON array (object?) remains available to populate the details table I would like to be able to display.

Somebody give me a nudge in the right direction?

Thanks.

Bonesnap

If you're running Firefox you can use console.log() to write the JSON object to the console so you can see its structure, and then from there see how to iterate over it to display its data.

Joseph_Sliker

...that looks like a handy tool. I got it to work, and when I tuck it into my .js file just after:

$.each(data, function(index, item){
console.log(item);

...the console DOES show me what appears to be the complete/useful info for each record like this:

(one JSON item/object)
Object {OFFER_ID: "8", PROPERTY: "Example_0004", STAFF: "JOAN", BUYER_NAME: "Skywalker", AGENT_LISTER: "Jabba/HuttRealty"…}
AGENT2_CONTACT: "ddd@nnnnnn.com"
AGENT_LISTER: "Jabba/HuttRealty"
AGENT_SELLER: "JOAN"
BUYER_NAME: "Skywalker"
CCRE_ID: "0"
DATE_OFFER: "2009-04-20"
DEALTYPE: "NON"
OFFERNOTES: "Test recording"
OFFER_ID: "8"
OFFER_STATUS: "Closed"
PROPERTY: "Example_0004"
STAFF: "JOAN"
proto: Object
defineGetter: function defineGetter() { [native code] }
defineSetter: function defineSetter() { [native code] }
lookupGetter: function lookupGetter() { [native code] }
lookupSetter: function lookupSetter() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }

HOWEVER, I think the first thing I need to know how to do is how to use that id="offer_id" value (ie. send it into some kind of javascript function that can tap the existing JSON data)

The clicked value that DOES appear in: "<span id="offer_id"></span>" should return that portion(row) of the JSON in some readable form, showing me a table with all of the field/value pairs

so if I cliked on the row that had offer_id "8", I would see the following complete details.

AGENT2_CONTACT: "ddd@nnnnnn.com"
AGENT_LISTER: "Jabba/HuttRealty"
AGENT_SELLER: "JOAN"
BUYER_NAME: "Skywalker"
CCRE_ID: "0"
DATE_OFFER: "2009-04-20"
DEALTYPE: "NON"
OFFERNOTES: "Test recording"
OFFER_ID: "8"
OFFER_STATUS: "Closed"
PROPERTY: "Example_0004"
STAFF: "JOAN"

I what I am not getting is how to write javascript to tap the existing JSON to display that set of stuff.

Weedpacket

A JSON object is just an ordinary JavaScript object ("JavaScript Object Notation"). Its properties are accessed in the same way.
So, for example, if [font=monospace]item[/font] is the above JSON object, and you want its [font=monospace]OFFER_ID[/font] property, you'd get at it in exactly the same way as you'd get at a property in any other JavaScript object: either as [font=monospace]item.OFFER_ID[/font] or [font=monospace]item["OFFER_ID"][/font] (the latter is useful if you have a list of properties you want to iterate over).

Incidentally, the object you've shown isn't pure JSON, since those don't have any methods: it would appear jQuery adds a bunch of those as well.

Joseph_Sliker

I think I'm understanding that part...what I DON'T get, is what happens when I click one of my rows (that start out with something like:
"<tr valign="top"onclick="selectRow(this)" id="'+item.OFFER_ID+'">" How do I actually USE that id=number that is returned by the click action?

like I said, clicking the row DOES appear to send the right number into a place where it is visible on the page...but I don't understant how to make that number talk to the .js file so it can target the relevant row/item values that are available in the JSON "array"

how can I get that onclick event/id number to do something in my .js file that will show me the specifics of the data[id] object "row" for that particular item.OFFER_ID?

do I have to write a separate document ready script? ie.
$(document).ready(function() {
/ HOW THE HECK DO I GET THE clicked item.OFFER_ID VALUE INTO HERE TO MAKE IT DO SOMETHING WITH that part of the JSON data[item.OFFER_ID]/
}):

do I need to add some custom function into the existing offerdata.js file to display the selected section of the object?

(I know I am thinking about this the way one would think about posting a single key value for a multidimensional array in .php in order to get to just a specific subset of array values: please disabuse me if this is a bad way to conceptualize this)

I appreciate your patience. I am also digging around on the web and looking locally for some better books to help me comprehend this stuff, but right now I think I simply know too little about javascript and JSON to formulate my questions correctly.

Weedpacket

Okay; I think the problem is that the only thing you're doing with the JSON object "data" is building the table, and discarding it afterwards. If you want to use it for more than that you'll need to keep it around somewhere so that you can refer to it later when you run your "selectRow()" method.

At first glance,

 $(document).ready(function() { 
 var offered_data;
$.getJSON('offerdata.php', function(data) {//a summary table that shows, say, 4 out of 12 fields that exist in JSON for each row
 ...
offered_data = data;
});

If you declare the variable inside the ready() handler, then you'll need to do the same for the selectRow() function (which is one reason why jQuery provides .click()) so that it too can make use of the same offered_data variable.

It may help to separate your view (the table, the "specifics display" and their behaviours) from your model (the JSON structure). I've just started looking at Knockout.js, and it seems promising (of course, any library's own site will focus on making the library look good).

Joseph_Sliker

Thank you for that. I think I understand part of it and will see if I can apply it to my problem this morning. I am always so grateful for the kind/helpful attitude of of you and so many others here, I wish there were I way I could send y'all a beer, or a coffee or a new car or something. :-)

Joseph_Sliker

...strangely the stuff that was working is suddenly NOT working at all in IE (v.8, which my company requires us to work in). The only thing that shows up in the IE8 window is the <hr /> below the <span> There is no offers table.

It's working fine in Chrome and Firefox. Oh, Microsoft....

dalecosp

Well, you might, eek, try the MS Debugger. F12, maybe. You may have to install it first ... and, truth, I'm not sure if it was available on v8.

Joseph_Sliker

I have been looking at the debugger stuff and am suspecting that my css file (a whole 'nother bunch of stuff I'm not clear on...but we won't go there right now) is giving IE8 something to choke on. Gah, my head still hurts. I've barely looked at my original problem today as I have been trying to figure out why IE won't show the stuff I can see in Chrome. Will have to look at this with a newer version of IE on my home computer once I get away from this work machine.

Bonesnap

Are you using any CSS3? IE8 supports next to no CSS3 properties or selectors. IE8 is the new IE6 that we have to deal with (and continue to do so for a very long time).