value of variable gets lost in javascipt

Question

I am trying to read JSON and populate the data table with its content. I am reading JSON in variable in out3 and trying to use the value of out3 later but its value it null later. How can I fix this issue?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.3/css/scroller.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js">
    .
  </script>
  <script>
    $(document).ready(function() {
      var out3 = [];
      $.getJSON('output.json', function(data) {
        out3 = data
        console.log(out3). /* here i get value of out3 */
      }).fail(function() {
        console.log("An error has occurred.");
      });
      alert(out3); /*value of out3 is null  */
      $('#example').DataTable({
        data: out3,
        /* no value here also*/
        deferRender: true,
        scrollY: 200,
        scrollCollapse: true,
        scroller: true
      });
    });
  </script>
</head>

<body>
  <table id="example" class="display nowrap" style="width:100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>ZIP / Post code</th>
        <th>Country</th>
      </tr>
    </thead>
  </table>
</body>

</html>

Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Sebastian Simon, Oct 13 '20 at 03:57

score 1 · Accepted Answer · answered Oct 13 '20 at 03:05

$.getJSON is async function (not synchronized) so this happens. It will be needed to define DataTable inside then callback after reading JSON data.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.3/css/scroller.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js">
    .
  </script>
  <script>
    $(document).ready(function() {
      var out3 = [];
      $.getJSON('output.json', function(data) {
        out3 = data
        console.log(out3). /* here i get value of out3 */
        
        alert(out3); /*value of out3 is null  */
        $('#example').DataTable({
          data: out3,
          /* no value here also*/
          deferRender: true,
          scrollY: 200,
          scrollCollapse: true,
          scroller: true
        });
      }).fail(function() {
        console.log("An error has occurred.");
      });
    });
  </script>
</head>

<body>
  <table id="example" class="display nowrap" style="width:100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>ZIP / Post code</th>
        <th>Country</th>
      </tr>
    </thead>
  </table>
</body>

</html>

value of variable gets lost in javascipt

1 Answers1