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

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.

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

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]);
        }
    });

---

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:

function build_PastDestinations()
{
    var $tablebody = $("<tbody>");
    
        $.getJSON('phpscripts/getpastdestinations.php', function(data)
        { 
            $.each(data, function(index, value)
            {
                $tablebody.append("<tr><td>" + value + "</td></tr>");
            });
        });
    console.log($tablebody);
}

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().