AJAX and jSon database issue

[Zapfino]

Hi Everyone.

I am using AJAX to make a call to a database that contains a few tables. In each table are 2 fields ('name' & 'sq').

While I have been successful in sending the 'name' data back using json_encode and manipulate it. I am struggling to send both fields back in a suitable manner that I can then easily manipulate the data contained.

The database table has a field 'name' which contain names and a field 'sq' which contains a corresponding number as below:


Thermal Liner 1
R300 Liner 2
Fibre Liner 3
Premium 4

This is as far as I have got with the code:

This is the ajax call I am using:

$(function () {

    $.ajax({   
	  type: "POST",                                   
      url: 'api6.php',      
      data: "postData=" + postData,
      dataType: 'json',   
      success: function(data)
      {

          for(i=0; i<dataLength; i++) {
          optionString += '<option value="'+data[i]+'">'+data[i]+'</option>';
          } 

          selectString += '<select name="producttype"
          id="producttype">'+optionString+'</select>';

          $('#output').html(selectString);  

      	}

This is the code on the api6.php page:

<?php 

  $host = "localhost";
  $user = "root";
  $pass = "root";

  $databaseName = "calculator";
  //$tableName = "calc";
  
  $tableName = $_POST['postData'];

  //include 'db_access.php';
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

 
  $result = mysql_query("SELECT * FROM $tableName");
  //$db_data = mysql_fetch_array($result);
  
  while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                $db_data[] = array($row['name']);
		$db_data2[] = array($row['sq']);
    }

  echo json_encode(array($db_data,$db_data2));

?>

THis code works fine for just passing back the single line $db_data[] = array($row['name']);, but I have added the extra code (in bold) to send back the extra data in the 'sq' field. The string coming back as two srings:

Thermal Liner,R300 Liner,Fibre Liner,Premium
1,2,3,4

How do I go about parsing the data so that I can separate out the data in each string so that it can be manipulated by javaScript or jQuery?

Any help, direction to a tut or other URL would be greatly appreciated.

Thanks for your time.

[devnull69]

You'll have to make one associative array out of it instead two.

  while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                $myarray = array("name" => $row['name'], "sq" => $row['sq']);
    }
  echo json_encode($myarray);

Btw two more important things about your Javascript code

      success: function(data)
      {

          for(i=0; i<dataLength; i++) {

dataLength is undefined. I think it was supposed to be data.length ... but generally you cannot loop through the keys of an object literal like this, because data.length will be undefined. Instead use this

for(var key in data) {
   // you can access the key as "key" and the value as "data[key]"
   alert(key);
   alert(data[key]);
}

Second: This two-liner needs to be one line OR you need to escape the line break

          selectString += '<select name="producttype"
          id="producttype">'+optionString+'</select>';

// should be

          selectString += '<select name="producttype" id="producttype">'+optionString+'</select>';

// or this

          selectString += '<select name="producttype" \
          id="producttype">'+optionString+'</select>';

[Zapfino]

Hi again all,

So I've managed to get a little bit further with the following:

<script type="text/javascript">

$("#make").change(function() {
  var postData = $(this).val();
  
  var optionString='';
  var selectString='';
  
  
   $(function () {

    $.ajax({   
	  type: "POST",                                   
      url: 'api6.php',      
      data: "postData=" + postData,
      dataType: 'json',   
      success: function(data)
      {
		  

		  var dataLength = data[0].length;
		  alert (dataLength);
		  
		  //varone=data[0][1];
		  //alert(varone);
		  

for(i=0; i<dataLength; i++) {
      optionString += '<option value="'+data[0][i]+'">'+data[0][i]+'</option>';
} 

selectString += '<select name="producttype" id="producttype">'+optionString+'</select>';

$('#output').html(selectString);

      	} 
		
    });
  
  }); 

  
})
.change();

</script>

What I am doing is selecting the first string, getting each element in that string and outputting it to a <select> drop-down, which all works fine. THEN what I wish to do is:

Depending on the option chosen by the user, I wish to make a calculation based on the the corresponding number ('sq') in that table.

Essentially, if the user picked 'Thermal Liner' I wish to make a calculation using the corresponding sq number (1), if a user selects 'Fibre Liner' then the corresponding calculation would be done with the number 3 (see my original post table).

Again, any help would be greatly appreciated.

Thanks for your time.

[Zapfino]

Thnaks for the post devnull69.

I had defined datalenth but just chose not to show it, probably stupid!

I'll have a look at the code you posted. Also, I have updated my post, probably while you where posting back to me.

Thanks.