title: DataTables Multiple Tables from Multiple JSON Arrays
body: <p>I want to output two tables, each sourcing information from two separate arrays within the same JSON source, but for some reason my code doesn't work. </p>
  
  <p>JSON Message:</p>
  
  <pre><code>{
    "Policies": [
      {
        "name": "A",
        "id": "1",
        "score": "0"
      }
    ],
    "Services": [
      {
        "name": "B",
        "id": "2",
        "score": "0"
      }
    ]
  }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;table id="policies-table" class="display" cellspacing="0" width="100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;ID&lt;/th&gt;
        &lt;th&gt;Score&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  &lt;table id="services-table" class="display" cellspacing="0" width="100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;ID&lt;/th&gt;
        &lt;th&gt;Score&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript Code:</p>
  
  <pre><code>var the_url = "www.example.com"
  
  var columnsDef = [
      { data : "name" },
      { data : "id" },
      { data : "score" }
  ];
  
  $(document).ready(function() {
      $('#policies-table').DataTable({
          ajax : {
          url : the_url,
          dataSrc: "Policies"
                  },
          columns : columnsDef
  }),
  
      $('#services-table').DataTable({
          ajax : {
          url : the_url,
          dataSrc: "Services"
                  },
          columns : columnsDef
  })
  });
  </code></pre>