Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Filtering JSON with JS

    Hey guys! Newbie web programmer here! Figured I'd try my hand at it since it's becoming more mainstream (is that the right word?) .. Anyway!


    I'm slowing learning about JSON/Javascript and have encountered a problem while looping through my own data.

    I have a JSON (created with various loops etc from an XML file)file stored separate to my html page.

    JSON

    Code:
    { "columnCount" : 6, "rowCount" : 3, "headings" : [ "TITLE", "ARTIST", "COUNTRY", "COMPANY", "PRICE", "YEAR" ], "xmlData" : [ [ "Empire Burlesque", "Bob Dylan", "USA", "Columbia", "10.90", "1985" ], [ "Hide your heart", "Bonnie Tyler", "UK", "CBS Records", "9.90", "1988" ], [ "Greatest Hits", "Dolly Parton", "USA", "RCA", "9.90", "1982" ] ] }
    Using Javascript within the html I am able to amend the div tag's etc to display my JSON in a table format, again through the use of various loops and if statements.

    I am now attempting to lessen the row's "printed" by introducing a filter type approach to the loop.

    JAVASCRIPT

    Code:
    	if ($("#filename").prop("selectedIndex") > 0 )
    	{ 	
    		$.getJSON ("table.php?filename=" + $("#filename").val(),
    	    function(jsondata) 
    		{
    		
    		alert(jsondata.rowCount);
    			if ( jsondata.rowCount > 0 )
    			{
    				var html = '<table id="myTable">';
                                    // Loops to display headings
    				for ( i = 0; i < jsondata.columnCount; i++ )
    	            html += "<th>" + jsondata.headings [ i ] + "</th>";
    				html += "<tbody>";
    			  
    			         // Loops to display Content
                                    //*****************
    				for (row = 0; row < jsondata.rowCount; row++) {
    				var showRow = false;
    				html += "<tr>";
    				
    					for (column = 0; column < jsondata.columnCount; column++) 
    					{
    						if (jsondata.xmlData[row]) 
    						{
    						tempHtml += "<td>" + jsondata.xmlData[row][column] + "</td>";
    						showRow = (jsondata.xmlData[row][column] == "1985") || showRow;
    						}
    						
    					}//*****************
    					
    				html += "</tr>";
    
    				html += "</tbody></table>";
    				$("#tablearea").html(html);
    			}
    		}//function
    		);
    	}
    The script loop's through the headings without a problem, however error's when attempting to implement the data based on the filter (noted by the *********)

    I am expecting a single result to be pasted, but the script itself error's and I haven't the slightest idea why!

    Could anyone offer any help on this?

    Thank you in advance!

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    What's the error? Why are you using tempHtml instead of html variable inside the loop for columns? That may be the culprit as tempHtml doesn't seem to be defined.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Btw, you are not declaring the for loop counter variables with var keyword. They become global by default.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •