tgkprog tgkprog - 2 months ago 8
AngularJS Question

angular 1 : populate with repeat using a 2-d array in json

I'm unfamiliar with angular. But the front end dev working my project insists he wants the json in this way:

{
"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"
}]
}
}]
}


I thought we should get rid of the repeating strings like "the_desc" and "value", and use :

{
"data": [{
"area1": [
["1", "2"],
["3", "4"]
]
}, {
"area2": [
["21", "22", "a5"],
["23", "24", "b6"]
]
}]
}


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).

Reason : less payload from server. Faster network data transfer.

Answer

I believe you need to change your data structure a little. Setting it up like this should help:

$scope.data = [{
    name: "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"
          }]

}, 
{
   name: "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"
    }]

}

Then it will be easy to access with ng-repeat like so:

      <div ng-repeat="d in data">
    <h1>{{d.name}}</h1>
    <div ng-repeat="r in d.rows">
      {{r.the_desc}}
    </div>
  </div>

Here's a Plunker. I'm not sure how you get your data, or if it is hardcoded, but this should at least get you started.