-
Mar 20th, 2013, 07:19 AM
#1
Thread Starter
Addicted Member
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
-
Mar 20th, 2013, 05:21 PM
#2
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.
-
Mar 21st, 2013, 05:27 AM
#3
Thread Starter
Addicted Member
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.
-
Oct 28th, 2013, 10:49 AM
#4
Frenzied Member
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]);
}
});
-
Oct 29th, 2013, 01:53 AM
#5
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:
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); }
Last edited by tr333; Oct 29th, 2013 at 01:57 AM.
-
Oct 29th, 2013, 01:58 AM
#6
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().
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|