Results 1 to 6 of 6

Thread: Load MySql Data to JavaScript Array

  1. #1

    Thread Starter
    Addicted Member
    Join Date
    Sep 2008
    Location
    Reading, UK
    Posts
    192

    Load MySql Data to JavaScript Array

    Hi There

    Is it possible, Using jQUERY (or something else ), to download data from my MySql DataBase and store it an array. I have seen load of people using $.post Or $.get to load data in to HTML element but i just want the data in an array

    many thanks

    Ian

  2. #2
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: Load MySql Data to JavaScript Array

    It is definitely possible. I'm not sure what language you're using on the server side, but you will want to get the data out of your MySQL database, and send it back as an array in JSON format. Use $.getJSON() to place the request to your server-side code and parse it on the client-side as a JSON array.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  3. #3

    Thread Starter
    Addicted Member
    Join Date
    Sep 2008
    Location
    Reading, UK
    Posts
    192

    Re: Load MySql Data to JavaScript Array

    Hi tr333

    thanks for getting back to me, ive tried using $.getJSON but with out much luck, if i try to run this code the nothing but '<tbody>' is returned

    Code:
    var tablebody = "<tbody>";
    	
    		$.getJSON("phpscript.php",function(data)
    		{ 
    			$.each(data,function(key,val)
    			{
    				tablebody += "<tr><td>" + val.Address + "</td></tr>";
    			});
    		});
    	return tablebody;
    id been trying to do this to act as part of a span i'm opening up in my web page, its basically a list picker, however the only time this loop seemed to run was after the span had been shown.

    Code:
    $.each(data,function(key,val)
    			{
    				tablebody += "<tr><td>" + val.Address + "</td></tr>";
    			});
    im my frustration im now using my php script to return the whole table body once the span has been loaded. i would have said that the JSON that i was retrieving was ok as when that script actually did run it did build the table as i expected it.

    this is the format that my JSON Downloads in [{"Address":"Address 1"},{"Address":"Address 2"}]
    this is the whole code for my Address Picker

    Code:
    var winaddpick;
    var AddPick;
    var ExAddress;
    var PickerSpanId = "PickerBoarder";
    var apLeft = 0;
    var apTop = 0;
    var apWidth = 600;
    var xpos = 0;
    var ypos = 0;
    var apHeight = 0;
    var apPosOffsetX = -200; //X position offset relative to calendar icon, can be negative value
    var apPosOffsetY = 0; //Y position offset relative to calendar icon, can be negative value
    var tablebody;
    var destins = new Array();
    //Add Picker Prototype
    
    function build_PastDestinations()
    {
    	var tablebody = "<tbody>";
    	
    		$.getJSON('phpscripts/getpastdestinations.php', function(data)
    		{ 
    			$.each(data, function(key,val)
    			{
    				tablebody += "<tr><td>" + val.Address + "</td></tr>";
    			});
    		});
    	alert(tablebody);
    }
    
    function show_addpicker()
    {
    
    	var PickerData = "<Span style='cursor:auto;'>";
    	var vPickerHeader = "<Table Style='width:500px;padding:0;margin:5px auto 5px auto;text-align:center;'><thead><tr><th>Previous Destinations</th></tr></thead>";
    	build_PastDestinations();
    	var PickerBody = "<tbody id=\"tbod\"></tbody>"
    	//var PickerBody = build_PastDestinations() <--this was where i wanted to build my table
    	var PickerCloser = "<tfoot><tr><td colspan='7' style=\"text-align:right;\">";
    	PickerCloser += "<img onmousedown='javascript:close_win();' src='javascripts/dtp/images2/cal_close.gif'>";
    	PickerCloser + "</td></tr></tfoot></table></span>";
    	apHeight = 400;
    	if (ypos > apHeight)
    	{
    		ypos = ypos - calHeight;
    	}
    	if (!winaddpick)
    	{
    		span = document.createElement("span");
    		span.id = PickerSpanId;
    		span.style.position = "absolute";
    		span.style.left = (xpos + apPosOffsetX) + 'px';
    		span.style.top = (ypos - apPosOffsetY) + 'px';
    		span.style.width = apWidth + 'px';
    		span.style.border = "solid 1pt #000000";
    		span.style.padding = "0";
    		span.style.backgroundColor = "#ffffff";
    		span.style.zIndex = 100;
    		document.body.appendChild(span);
    		winaddpick = document.getElementById(PickerSpanId);
    	}
    	else
    	{
    		winaddpick.style.visibility = "visible";
    		winaddpick.style.Height = apHeight;
    		
    	}
    	winaddpick.innerHTML = PickerData + vPickerHeader + PickerBody + PickerCloser;
    	getdest();
    	return true;
    	
    }
    function close_win()
    {
    	winaddpick.style.visibility = 'hidden';
    }
    function get_mPos(evt)
    {
    	var objectID,
    	dom,
    	de,
    	b;
    	
    	if (document.addEventListener)
    	{ // w3c
    		objectID = evt.target.id;
    		if (objectID.indexOf(PickerSpanId) !== -1)
    		{
    			dom = document.getElementById(objectID);
    			cnLeft = evt.pageX;
    			cnTop = evt.pageY;
    
    			if (dom.offsetLeft)
    			{
    				cnLeft = (cnLeft - dom.offsetLeft);
    				cnTop = (cnTop - dom.offsetTop);
    			}
    		}
    		xpos = (evt.pageX);
    		ypos = (evt.pageY);
    	}
    	else
    	{
    		de = document.documentElement;
    		b = document.body;
    		xpos = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
    		ypos = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    	}
    }
    function changeApBorder(element,type)
    {
    	if (type == 0)
    	{
    		element.style.background = "red";
    	}
    	else
    	{
    		element.style.background = "white";
    	}
    }
    document.onmousedown = get_mPos;
    many thanks again

    Ian
    Last edited by 12many; Mar 21st, 2013 at 05:30 AM.

  4. #4
    Frenzied Member zuperman's Avatar
    Join Date
    Dec 2000
    Location
    Portugal
    Posts
    1,033

    Re: Load MySql Data to JavaScript Array

    parseJSON

    example of an mvc app:
    Code:
        $.post("<?php echo base_url();?>posts/index", function (result) {
        	var obj = $.parseJSON(result);
            for (var i in obj.records) {
                createPost(obj.records[i]);
            }
        });
    Help keep this forum clean: Remember to mark your thread as resolved · Search before you post · Remember to rate posts that help

    VS2010: Visual Studio 2010 Keybinding Posters
    · Service Pack 1
    Tools: GhostDoc - automatically generates XML documentation comments
    · NuGet package Manager · PowerCommands IDE extensions
    Source Control: ankhsvn - integration for SVN
    · Windows Shell Extension for Subversion

    Development Laptop: Intel Core i5 430M 2.26 GHz @ 2.53 GHz
    · 4096 MB, DDR3 PC3-8500F (533 MHz), Kingston · ATI Mobility Radeon HD 5470 · 15.6 @ 16:9, 1366x768 pixel, HD LED LCD

    I follow:
    JoelOnSoftware - A weblog by Joel Spolsky, a programmer working in New York City, about software and software companies
    ScottGu's Blog - Scott Guthrie works for Microsoft as the Product Manager of the .NET Framework
    Portugal-a-Programar - Portuguese Developers Community
    .NET Rocks! - is a weekly Internet audio talk show for .NET Developers.

    Programming Languages:
    C#
    · VB.NET · JAVA · PHP · Javascript
    Other:
    XML
    · HTML · CSS · JQuery · SQL



    *** Proudly Portuguese ***

  5. #5
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: Load MySql Data to JavaScript Array

    It's a bit of a late reply to this...

    Your problem is the invalid JSON being returned from the PHP script.

    PHP has functions to encode/decode data structures into valid JSON. Use the built-in functions and you should never get invalid JSON.

    You would want your addresses returned as scalar values in an array: ["Address 1","Address 2"]
    Key/value pairs only work if you have distinct keys, like in a hash table.

    JavaScript Code:
    1. function build_PastDestinations()
    2. {
    3.     var $tablebody = $("<tbody>");
    4.    
    5.         $.getJSON('phpscripts/getpastdestinations.php', function(data)
    6.         {
    7.             $.each(data, function(index, value)
    8.             {
    9.                 $tablebody.append("<tr><td>" + value + "</td></tr>");
    10.             });
    11.         });
    12.     console.log($tablebody);
    13. }
    Last edited by tr333; Oct 29th, 2013 at 01:57 AM.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  6. #6
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: Load MySql Data to JavaScript Array

    I would also suggest learning how to use the developer tools built in to each browser. You can view the error console to see JavaScript errors in your code. It will also show the results of console.log() which is more user-friendly than alert().
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Posting Permissions

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



Click Here to Expand Forum to Full Width