Passing array from php to javascript through ajax response - javascript

This is my first post in stackoverflow. I have always got my answers from previously posted questions. This problem has been bugging me and all the solutions I tried have not worked.
I have a js function which makes an ajax request to get weather info of town passed:
var _getWeatherInfo = function(ntown){
var town = ntown;
var url = "PHP/weather.php?town=" + town;
request1.onreadystatechange = _refreshWeatherList();
request1.open("GET", url, true);
request1.send("");
}
I am using the following php code to return the sql results stored in array:
<?php
//Connection to the database
$mysql = mysql_connect("localhost","xuvaz","x");
//Selecting Database
$db = mysql_select_db("weather");
$town = $_GET['town'];
$tarray = array();
$sql1= mysql_query("SELECT * FROM weather WHERE town='$town'");
while($row = mysql_fetch_assoc($sql1)) {
$tarray = array('town' => $row['town'],'outlook' => $row['outlook']);
}
echo json_encode($tarray);
?>
Then I have a function that is called when the request is completed:
var _refreshWeatherList = function() {
var weather_info = request1.responseText;
for(var i = 0; i < weather_info.length; i++){
var wtown = weather_info[i].town;
var woutlook = weather_info[i].outlook;
var wmin = weather_info[i].min_temp;
var wmax = weather_info[i].max_temp;
}
var wLine = new WLine(wtown, woutlook, wmin, wmax);
_weather.push(wLine);
_refreshWeatherDisplay();
}
The problem is I cant access the array values.
I can see the values as {"town":"Christchurch","outlook":"fine"} in firebug under response.
Even when I use JSON parse it gives error in the firebug , JSON.parse: unexpected end of data. If
I can just access the data my whole project would be completed.

Your PHP code is returning an object (last row from your loop) rather than an array of objects, but your JavaScript is expecting an array.
Change your PHP to the following to appand to $tarray:
while($row = mysql_fetch_assoc($sql1)) {
$tarray[] = array('town' => $row['town'],'outlook' => $row['outlook']);
}
Your JavaScript needs to wait for readyState = Loaded and JSON-decode the responseText:
var _refreshWeatherList = function() {
if(request1.readyState == 4) {
var weather_info = JSON.parse(request1.responseText);
....
}
}
If the parse is failing, trying logging it to the console to make sure the PHP isn't returning extra characters.

var _refreshWeatherList = function() {
var weather_info = eval("("+request1.responseText+")");
for(var i = 0; i < weather_info.length; i++){
var wtown = weather_info[i].town;
var woutlook = weather_info[i].outlook;
var wmin = weather_info[i].min_temp;
var wmax = weather_info[i].max_temp;
}
var wLine = new WLine(wtown, woutlook, wmin, wmax);
_weather.push(wLine);
_refreshWeatherDisplay();}
'request1.responseText' must be 'object' use eval() --! my english not well

Thank you for all your help. I found the fault. I forgot to include these two lines.
if (request1.readyState == 4) {
if (request1.status == 200){

Related

Loop in IndexedDB Transactions

I am using the product design tool "Lumise" which saves the guest designs and uploads in IndexedDB. I want to save the data which is saved in these object stores in MySQL table using the insert query. I have created a selectindexeddb.js file and indexeddbtomysql.php file and already there is a file for the tool which created the IndexedDB and updating it called "app-uncompressed.js".
my question is: I want to make the loop for each transaction happen to the design from creating, update or delete how can I do it from separate js file.
hint: I have tried to write this for loop in lumise js file but it shows bunch of errors also because this file is extremely huge.
any help ?
app-uncompressed.js :)
https://pastebin.com/cm6aNZ2A
Another Hint:)
in this file, you can focus in 12177 lines which starts creating IndexedDB
selectindexeddb.js
var db;
var request = indexedDB.open("lumise");
var transaction = db.transaction(["designs"]);
var objectStore = transaction.objectStore("designs");
var request = objectStore.get("K730MRT0"); // this i want it to have it from app_uncompressed.js as a variable.
// i want to make the loop here ?!
request.onsuccess = function(event) {
// Do something with the request.result!
var designid = request.result.id;
var designname = request.result.name;
var designscreenshot = request.result.screenshot;
console.log("rsults is " + designid);
$.ajax({
url: 'indexeddbtomysql.php',
method: 'POST',
data: {design_id:designid ,design_name:designname,design_screenshot:designscreenshot },
success: function(data) {
alert("saved y marweta ;)")
}
});
};
indexeddbtomysql.php
<?php
session_start();
include '../config.php';
$design_id = $_POST['design_id'];
$design_name = $_POST['design_name'];
$design_screenshot = $_POST['design_screenshot'];
$query = 'INSERT INTO `user_designs`( `key`, `name`, `screnshot`) VALUES ($design_id
,$design_name , $design_screenshot);';
?>
updated I have tried to put the for loop in the app_uncompersed.js but it didn`t work
save : function(ob, storeName, callback) {
if (this.db == null)
return callback(null);
var i ;
for (i = 0; i < count(rows); i++) {
var trans = this.db.transaction(ob.length === 2 ?
[storeName, 'dumb'] : [storeName], "readwrite");
var store = trans.objectStore(storeName);
if (ob.id === null || ob.id === undefined)
ob.id = parseInt(newDate().getTime()/1000)
.toString(36)+':'+Math.random().toString(36).substr(
2);
var obj = $.extend({
created: new Date().getTime()
}, (ob[0] !== undefined ? ob[0] : ob));
var process = store.put(obj, obj.id);
if (typeof callback == 'function')
process.onsuccess = callback;
console.log("ABC");
if (ob[1] !== undefined) {
var obj_dumb = $.extend({
id: obj.id,
created: obj.created
}, ob[1]);
trans.objectStore('dumb').put(obj_dumb, obj.id);
}
var designid = obj.id; //this var i want to save
}
},
I am currently learning IndexedDB and find this link to be very useful. There is a tutorial in it which covers what you're trying to achieve.
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

how to get js var data from GDownloadUrl callback?

Now, I have tried to get some data from crawling website.
The target website provides current status of bicycle stations using google map.
GDownloadUrl("/mapAction.do?process=statusMapView", function(data, responseCode) {
var jsonData = eval("(" + data + ")");
//alert(jsonData.centerLat);
var length = jsonData.markers.length;
//if (length > 100) length = 100;
for (var i = 0; i < length; i++) {
var point = new GLatLng(parseFloat(jsonData.markers[i].lat), parseFloat(jsonData.markers[i].lng));
var name = jsonData.markers[i].name;
var cntRackTotal = jsonData.markers[i].cntRackTotal;
var cntRentable = jsonData.markers[i].cntRentable;
var cntLockOff = jsonData.markers[i].cntLockOff;
var cntPrtRack = jsonData.markers[i].cntPrtRack;
var percent = jsonData.markers[i].percent;
var imgFile = jsonData.markers[i].imgFile;
var number = jsonData.markers[i].kiosk_no;
//map.addOverlay(createMarker(number, point, name, cntRackTotal, cntRentable, cntLockOff, cntPrtRack, percent, imgFile ));
}
});
This JS source code is used on target website. In GDownloadUrl callback function, the parameter "data" contains current status of bicycle stations. And I want to get data.
Now, I tried using python selenium and execute_script().
jsSourcecode = ("var strData;"+
"strData = GDownloadUrl('/mapAction.do?process=statusMapView',"+
" function(data, responseCode) {return data;}); return strData;")
data = driver.execute_script(jsSourcecode)
this source code is that I used to get data. I expected data on callback would be stored on var strData and the return value of execute_script() would be the data. but the return value is just "True".
I have little knowledge about js.. How can I get the data? Please help
The function you are calling is asynchronous and requires a callback function as argument.
Use execute_async_script and provide the callback present in the last argument:
data, status = driver.execute_async_script("""
var callback = arguments[0];
window.GDownloadUrl('/mapAction.do?process=statusMapView', function(data, status){
callback([data, status]);
});
""")

Object handling in Chrome/FF?

I have this code:
$('.gBook').click(function(){
var values = [];
var getDiff = $('#totalPrice').attr("data-value");
var i = 0;
$('td[data-check="true"]').each(function(){
var valueToPush = { };
valueToPush["price"] = $(this).attr("data-price");
valueToPush["id"] = $(this).attr("data-id");
valueToPush["diff"] = getDiff;
values.push(valueToPush);
i++;
});
var arrayToSend = {values};
$.post( '<?php echo PATH;?>ajax/updateRoom.php',arrayToSend, function(data){
if(data != "ERROR"){
$('#all-content').html(data).css("overflow-y","auto");
}else{
alert("ERROR");
}
});
});
In Chrome, this line gives an error var arrayToSend = {values}; (Uncaught SyntaxError: Unexpected token }) In Firefox everything is fine.
I guess it's because of the rather "loose" error handling of FF, but how am I doing it correctly?
I tried to initialize the object with var arrayToSend = new Object(); before the $.each, but that gives an empty array after POST.
Where is my mistake?
try this
var arrayToSend = {optionsChosen:values};
Then in php or whatever you use for data handling look for the POST variable optionsChosen.
What you did was try to make an Object with parameter array = nothing
You basically did this in your code. It doesn't take an expert to see whats wrong with this statement.
arrayToSend = new function() {
this.(new Array(1,2,3)); // This is cringeworthy if you see it like this.
}
In the example I gave it translates to this:
arrayToSend = new function() {
this.optionsChosen = new Array(1,2,3);
}

Dynamical creating dropdown from database data in PHP & Ajax

I am trying to make dynamical dropdown that will be populated by data collected from database. I am stuck at parsing data from multidimensional array sent by PHP file. My code:
Part of HTML file (only the responsible JavaScript (Ajax function))
function mentor() {
// 1. Create XHR instance - Start
var oblast = document.getElementById("oblast").value; //previous dropdown from which I need to create next one
document.getElementById("mentorr").innerHTML = ""; //emtpy the dropdown I need to create
instancee();
// 1. Create XHR instance - End
// 2. Define what to do when XHR feed you the response from the server - Start
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status == 200 && xhr.status < 300) {
var val = xhr.responseText;
alert(val); //just a check to see does it get correct data, and it get, everything is OK so far
var jsonData = JSON.parse(val);
var selectList = document.getElementById('mentorr'); //id of the dropdown I need to create
for (var i in jsonData) {
var option = document.createElement('option');
//$response[$i]['name'];
option.value = jsonData['id'][i];
option.text = jsonData['name'][i];
selectList.appendChild(option);
}
}
}
}
// 2. Define what to do when XHR feed you the response from the server - Start
// 3. Specify your action, location and Send to the server - Start
xhr.open('POST', 'ajax.php');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("oblast=" + oblast);
}
Part of ajax.php file that fetches data and sends to HTML:
$queryData1 = mysql_query("SELECT * FROM profesori WHERE idprof = '$prof'");
while($result2 = mysql_fetch_array($queryData1)) {
$id=$result2['idprof'];
$profesor=$result2['ime']. " ".$result2['prezime'];
$data = array
(
'id' => array($id),
'name' => array($profesor)
);
echo json_encode($data);
}
alert(var) line of code gives this:
So data is corretly fetched from database and sent to HTML. But the problem is in populating dropdown menu (parsing data). Error in console in "unexpected token {" in the line
var jsonData = JSON.parse(val);
Does anyone know how to fix this?
for (var i = 0; i < jsonData.length; i++) {
var option = document.createElement('option');
option.value = jsonData[i].id;
option.text = jsonData[i].name;
selectList.appendChild(option);
}
Should do the trick, JSON.parse returns json objects, you can loop through the objects using an index and fetch properties of an object like this "object.property".

Generating JSON Object

I'm trying to parse the rows in a table that I generate using Javascript by adding items to a cart and then create a json object when the user hits save order of all the items and pass it to a php script using $.post in jQuery.
The only trouble I'm having is understanding JSON objects and how to push more items onto the object. I get an error in firebug telling me that devices[i] is undefined. Not really sure how else to accomplish this. I thought it was really just an array.
function Save()
{
var devices = new Object();
var i = 0;
$("#device_tbl tr:gt(0)").each(function(){
var manufid = $(this).find("td").eq(0).find(".manuf_id").html();
var modelid = $(this).find("td").eq(1).find(".model_id").html();
var condition = $(this).find("td").eq(2).find("select").val();
var carrier = $(this).find("td").eq(3).find("select").val();
var imei = $(this).find("td").eq(4).find("input").val();
var price = $(this).find("td").eq(5).html();
alert(manufid+"\n"+modelid+"\n"+carrier+"\n"+imei+"\n"+price);
devices[i].manufid = manufid;
devices[i].modelid = modelid;
devices[i].carrier = carrier;
devices[i].imei = imei;
devices[i].price = price;
i++;
});
document.write(devices); //just for debugging
$("#final").show();
}
You currently have devices declared as an object, but you're treating it like an array.
You need to declare it as an array of objects.
function Save()
{
var devices = new Array();
var i = 0;
$("#device_tbl tr:gt(0)").each(function(){
var manufid = $(this).find("td").eq(0).find(".manuf_id").html();
var modelid = $(this).find("td").eq(1).find(".model_id").html();
var condition = $(this).find("td").eq(2).find("select").val();
var carrier = $(this).find("td").eq(3).find("select").val();
var imei = $(this).find("td").eq(4).find("input").val();
var price = $(this).find("td").eq(5).html();
alert(manufid+"\n"+modelid+"\n"+carrier+"\n"+imei+"\n"+price);
devices[i] = new Object();
devices[i].manufid = manufid;
devices[i].modelid = modelid;
devices[i].carrier = carrier;
devices[i].imei = imei;
devices[i].price = price;
i++;
});
document.write(devices); //just for debugging
$("#final").show();
}
or something like that.
(Updated to show it in your code)

Categories

Resources