"Utilizing AJAX to dynamically extract data from PHP and manipulate it in a multi-dimensional

Question

"Utilizing AJAX to dynamically extract data from PHP and manipulate it in a multi-dimensional

Just starting out with JSON/AJAX and I'm in need of some help...

I have a PHP page that seems to be returning [{"id":"1"},{"id":2}] to my javascript. How can I convert this data into something more user-friendly, like a dropdown menu in HTML?

Here is the code snippet:

<script>
function displayData(str) {
   if (str=="") {
    var ajaxDisplay=xmlhttp.responseText;
    var res=ajaxDisplay.split("#");
    document.getElementById("ajax1").innerHTML=res[1];
     return;
   } 
   if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
   } else { 
     // code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    var ajaxDisplay=xmlhttp.responseText;
    var res=ajaxDisplay.split("#");
    document.getElementById("ajax1").innerHTML=res[0];
     }
   }
   xmlhttp.open("GET","get.php?q="+str,true);
   xmlhttp.send();
 }
</script>

<div id='ajax1'><b>The ID dropdown will appear here.</b></div>

javascript ajax json

Answer 1

Answer №1

It seems like you've declared the variables twice, but I believe this explanation could be beneficial if you're seeking my opinion.

function displayUser(from, to)
{

if (from=="")
{
document.getElementById("show").innerHTML="";
 return;
 } 
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
  else
 {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
 xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    var arr=xmlhttp.responseText.split(":||:");//Used as a delimiter 
document.getElementById('show').innerHTML=arr[0];
     document.getElementById('show1').innerHTML=arr[1];
}
}
 xmlhttp.open("GET","some.php?q="+ from + "&w=" + to,true);
 xmlhttp.send();
 }

The PHP side is slightly different than usual, you'll require something similar to this.

 if  (!$result=mysqli_query($con,$sql))
 {
 die('Could not retrieve data: ' . mysqli_error($sql));
 }
 $test=mysqli_fetch_all($result,MYSQLI_ASSOC);//Crucial for fetching the array correctly for display
  $length=count($test);
  $half_length=$length/2;
 //echo $half_length."<br />";//used for testing
 $test12=array_chunk( $test,$half_length+.5,false);//true can also be used to preserve keys, worked in both ways for me 
 $test5=$test12[0];
 $test6=$test12[1];
 while(list($key,$val)=each($test5))
 {
 echo "<p>".$val[$colunm_name]."<p/><br />";//You can insert tags here to list your array in the desired format
  }
  echo ":||:";//Ensure the delimiter is outside of the loop
 while(list($key2,$val2)=each($test6) )
 {
 echo "<p>".$val[$colunm_name]."<p/><br />";//You can adjust the tags here as needed
 //echo "result_count_".count($test)."_-st<br/>";//used for testing

Understanding this may take some time, but I trust it will be valuable to you.

Answer 2

It seems like you've declared the variables twice, but I believe this explanation could be beneficial if you're seeking my opinion.

function displayUser(from, to)
{

if (from=="")
{
document.getElementById("show").innerHTML="";
 return;
 } 
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
  else
 {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
 xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    var arr=xmlhttp.responseText.split(":||:");//Used as a delimiter 
document.getElementById('show').innerHTML=arr[0];
     document.getElementById('show1').innerHTML=arr[1];
}
}
 xmlhttp.open("GET","some.php?q="+ from + "&w=" + to,true);
 xmlhttp.send();
 }

The PHP side is slightly different than usual, you'll require something similar to this.

 if  (!$result=mysqli_query($con,$sql))
 {
 die('Could not retrieve data: ' . mysqli_error($sql));
 }
 $test=mysqli_fetch_all($result,MYSQLI_ASSOC);//Crucial for fetching the array correctly for display
  $length=count($test);
  $half_length=$length/2;
 //echo $half_length."<br />";//used for testing
 $test12=array_chunk( $test,$half_length+.5,false);//true can also be used to preserve keys, worked in both ways for me 
 $test5=$test12[0];
 $test6=$test12[1];
 while(list($key,$val)=each($test5))
 {
 echo "<p>".$val[$colunm_name]."<p/><br />";//You can insert tags here to list your array in the desired format
  }
  echo ":||:";//Ensure the delimiter is outside of the loop
 while(list($key2,$val2)=each($test6) )
 {
 echo "<p>".$val[$colunm_name]."<p/><br />";//You can adjust the tags here as needed
 //echo "result_count_".count($test)."_-st<br/>";//used for testing

Understanding this may take some time, but I trust it will be valuable to you.

"Utilizing AJAX to dynamically extract data from PHP and manipulate it in a multi-dimensional

Answer №1

Similar questions

Retrieving Data from all Rows in jQuery DataTables

Using SVG Mask to enhance shape Fill

Tips for resolving the issue of "Unable to assign property '_DT_CellIndex' to undefined in Jquery Datatable"

Unable to locate the appropriate constructor for com.eviware.soapui.support.XmlHolder using java.io.StringWriter as an argument

Personalizing MaterialUI's autocomplete functionality

Avoiding memory leaks in Node.js with Express framework

Is there a way to trigger an interact.js event that will reset all draggables back to their original position at coordinates (0, 0)?

fetching indexeddb information using the equivalent of a "WHERE IN (a,b)" query

Are Css3 Transition and Transform properties dysfunctional in older versions of IE?

Issues with click events in the navigation menu

JavaScript: Retrieving the names of children within a <div> element

"Utilizing jQuery's getJSON method in a session to fetch data

Encountering a type error when attempting to assign an interface to a property

Storing data in localStorage with the use of java, json, ajax, and html

Executing a command to modify the local storage (no need for an API request) using redux persist in a React Native environment

React application not functioning on localhost:3000 despite successful compilation with no errors, only displaying the title on localhost but failing to show any content

Transfer a script from a view to application.js in Rails: Guide and Instructions

Is there a method to store only a portion of the string object in async-storage?

What are some strategies for exporting methods without resorting to the use of import * as ...?

Tips on how to submit the ID of a span element with ajax