title: angular 1 : populate table with ng-repeat using a 2-d array from server's json
body: <p>I'm unfamiliar with angular. But the front end dev working my project insists he wants the json in this way:</p>
  
  <pre><code>{
  "data": [{
      "area1": {
          "rows": [{
              "the_desc": "A value 1",
              "value": "sample value 1"
          }, {
              "the_desc": "A value 2",
              "value": "sample value 2"
          }, {
              "the_desc": "A value 3",
              "value": "other 3"
          }, {
              "the_desc": "A value 4",
              "value": "other 4"
          }, {
              "the_desc": "A value 5",
              "value": "other goats fly"
          }, {
              "the_desc": "A value 6",
              "value": "bla blah"
          }, {
              "the_desc": "A value 7",
              "value": "other 7"
          }, {
              "the_desc": "A value 8",
              "value": "other 8"
          }]
      }
  }, {
      "area2": {
          "rows": [{
              "the_desc": "A value 9",
              "value": "sample value 9"
          }, {
              "the_desc": "A value 10",
              "value": "sample value 10"
          }, {
              "the_desc": "A value 11",
              "value": "other 11"
          }, {
              "the_desc": "A value 12",
              "value": "other 12"
          }, {
              "the_desc": "A value 13",
              "value": "other goats fly 13"
          }, {
              "the_desc": "A value 14",
              "value": "bla blah"
          }, {
              "the_desc": "A value 15",
              "value": "other 15"
          }, {
              "the_desc": "A value 16",
              "value": "other 16"
          }]
      }
  }]
  }
  </code></pre>
  
  <p>I thought we should get rid of the repeating strings like "the_desc" and "value", and use :</p>
  
  <pre><code>{
  "data": [{
      "area1": [
          ["1", "2"],
          ["3", "4"]
      ]
  }, {
      "area2": [
          ["21", "22", "a5"],
          ["23", "24", "b6"]
      ]
  }]
  }
  </code></pre>
  
  <p>But he insists that NG-repeat would not be able to get the inner arrays (they are known column rows of data. Could be [][] table data.
  Question :  is there any issue gettig data like that in angular 1? Without having nested NG repeat. Would it make a difference if I said the columns are fixed for each area? Is there a way to iterate over the rows, and access the columns by index? In our case the number of columns is known for each area (table on page).</p>
  
  <p>Reason : less payload from server. Faster network data transfer.</p>
  
  <p>Got it with help from two of the answers, experimenting on <a href="https://plnkr.co/edit/DrsXTP4kD0CnyAQwuoSu?p=preview" rel="nofollow">https://plnkr.co/edit/DrsXTP4kD0CnyAQwuoSu?p=preview</a> and the lovely angular error reporting : <a href="https://docs.angularjs.org/error/ngRepeat/dupes?p0=ele%20in%20data.data%5B1%5D.area2%5B0%5D&amp;p1=string:col%203%20A&amp;p2=col%203%20A" rel="nofollow">https://docs.angularjs.org/error/ngRepeat/dupes?p0=ele%20in%20data.data%5B1%5D.area2%5B0%5D&amp;p1=string:col%203%20A&amp;p2=col%203%20A</a> .</p>
  
  <p>Gist of the solution:</p>
  
  <p>In js controller:</p>
  
  <pre><code>$scope.data =       {
  "data": [{"area1":
       [[ "A value 1",...
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div class= "" ng-repeat="ele in data.data[1].area2 track by $index"&gt;
    &lt;span class='d2'&gt; {{(ele[0])}} &lt;/span&gt;&lt;span class='d2'&gt;  {{(ele[1])}}...
  </code></pre>