Read javascript array data into webpage

Question

I have a php script that executes a query against a mySQL database and returns an array. Here is the output:

[["185","177","8","10h:43m:54s","http:\/\/localhost\/toastReport\/cd7bf9ae-c21d-4746-bdd9-6934f8e5924e_ed13cfdc-403b-4a82-8f71-0da41a466e62_report\/feature-overview.html"]]

I am using ajax to call the PHP script and am then trying to load the data into a javascript array and then print out different values later in my HMTL page. Here is the javascript script I have in my page header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script type="text/javascript">

    function myfunction() {

      var automation = [];

      jQuery.ajax({
           type: "POST",
           url: "http://localhost:8080/sanityTestDataCox.php",
           success: function (jsonData) {
              automation = jsonData;
              console.log(automation);
             }
       });
     }

  </script>

I am trying to use the array data in a card at the top of my page:

   <div class="card text-white bg-primary o-hidden h-100">
 <a class="card-header text-white clearfix small z-1" href="#">
 <span class="float-left">COX Sanity Run </span>
 </a>
  <div class="card-body">
     <div class="card-body-icon">
        <i class="fa fa-fw fa-tasks"></i>
     </div>
     <div class="mr-5">Total tests: <script type="text/javascript"> myfunction(); </script></div>
     <div class="mr-5">Failed tests:</div>
     <div class="mr-5">Passed tests:</div>
     <span class="float-right"><div class="mr-5">Run Time:</div></span>
  </div>
  <a class="card-footer text-white clearfix small z-1" href="http:\//localhost\/toastReport\/cd7bf9ae-c21d-4746-bdd9-6934f8e5924e_ed13cfdc-403b-4a82-8f71-0da41a466e62_report\/feature-overview.html">
  <span class="float-left">View Details</span>
  <span class="float-right">
  <i class="fa fa-angle-right"></i>
  </span>
  </a>

I am confused on how to make this work and any info or links to pages with a guide on how to make this work would be greatly appreciated. Thanks!

So in the success callback you display the data. First returning does nothing in our code, it is not going to write anything out to the page, second, it is an asynchronous method and you can not return from it. So you want to look at html() or append() — epascarello, Jul 09 '18 at 19:09

score 0 · Accepted Answer · edited Jul 09 '18 at 19:39

Simply use the data when it's returned from ajax().

      jQuery.ajax({
       type: "POST",
       url: "http://localhost:8080/sanityTestDataCox.php",
       success: function (data) {
          console.log(data);
          var total = data[0];
          var failed = data[1];
          var passed = data[2];
          var time = data[3];

          document.getElementById('total').innerHTML = "Total tests: " + total;
          document.getElementById('failed').innerHTML = "Failed tests: " + failed;
          document.getElementById('passed').innerHTML = "Passed tests: " + passed;
          document.getElementById('runTime').innerHTML = "Run Time: " + time;

         }
   });
 }

HTML

     <div id="total" class="mr-5">Total tests: <script type="text/javascript"> myfunction(); </script></div>
     <div id="failed" class="mr-5">Failed tests:</div>
     <div id="passed" class="mr-5">Passed tests:</div>
     <span id="runTime" class="float-right"><div class="mr-5">Run Time:</div></span>

Read javascript array data into webpage

1 Answers1