angular 1 : populate table with ng-repeat using a 2-d array from server's json

Question

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.

Got it with help from two of the answers, experimenting on https://plnkr.co/edit/DrsXTP4kD0CnyAQwuoSu?p=preview and the lovely angular error reporting : https://docs.angularjs.org/error/ngRepeat/dupes?p0=ele%20in%20data.data%5B1%5D.area2%5B0%5D&p1=string:col%203%20A&p2=col%203%20A .

Gist of the solution:

In js controller:

$scope.data =       {
"data": [{"area1":
     [[ "A value 1",...

And HTML:

<div class= "" ng-repeat="ele in data.data[1].area2 track by $index">
  <span class='d2'> {{(ele[0])}} </span><span class='d2'>  {{(ele[1])}}...

EternalLight · Accepted Answer · 2016-09-14 16:11:10Z

2

As a front-end dev, I would choose the first structure as well. In any case, you'd have to use nested ng-repeat like so:

<div class="area" ng-repeat="area in data">
    <div class="row" ng-repeat="row in area.rows">
        <p class="description">{{::row.the_desc}}</p>
        <p class="value">{{::row.value}}</p>
    </div>
</div>

For the second snippet:

<div class="area" ng-repeat="area in data">
    <div class="row" ng-repeat="(key, value) in area.rows">
        <p class="description">{{::key}}</p>
        <p class="value">{{::value}}</p>
    </div>
</div>

For the 3rd snipped, provided that the array structure remains the same and has only two values, we would be able to access them by index.

<div class="area" ng-repeat="(key,area) in data">
    <!-- Prints area1, area2 if necessary -->
    <p>{{key}}</p>
    <!-- Prints 1st and 2nd value of the area array -->  
    <div class="row" ng-repeat="row in area">               
        <p class="description">{{row[0}}</p>
        <p class="value">{{row[1]}}</p>
    </div>
</div>

Is it possible to achieve this without nested ng-repeat? Not likely. There are too many nested arrays.

But honestly, I don't think that storing a "value" in object key is a good practice (even it's possible to display with Angular), so I'd suggest you to follow your dev's advice and use the first structure.

edited Sep 14, 2016 at 16:11

answered Sep 13, 2016 at 16:22

EternalLight

1,3281 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

tgkprog Over a year ago

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?

EternalLight Over a year ago

Yes, we can iterate over rows and display values {{row[0]}} and {{row[1]}}. Technically, all of the 3 structures could work.

tgkprog Over a year ago

Any chance you can add this to your answer then I can mark it right? I added additional info to the question too

EternalLight Over a year ago

Updated, here you are.

tgkprog Over a year ago

Your answer and @rani-radcliff link helped. Plus error message of angular that gave me the last info i needed to take care of repeats, so: <div ng-repeat="ele in data.data[1].area2 track by $index">{{(ele[0])}}     {{(ele[1])}} ...

|

joh04667 · Accepted Answer · 2016-09-13 16:18:15Z

No, not at all, ng-repeats can be nested. Even in vanilla Javascript, you could get this data into whatever formation you'd like in order to make ng-repeat display it as desired. The last two options you put would actually make this more difficult.

For the first configuration, assuming it has been JSON.parse()ed:

<section ng-repeat="area in data">
  <div ng-repeat="row in area.rows">
    <p>{{row.the_desc}} is {{row.value}}</p>
  </div>
</section>

This iterates over the data array, and for each area in data creates another ng-repeat for the area#.rows arrays to iterate over the rows.

It is even possible to use ng-repeat to iterate over keys in an object, which would need to be done with the other two solutions.

Rani Radcliff · Accepted Answer · 2016-09-13 16:39:37Z

0

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.

answered Sep 13, 2016 at 16:39

Rani Radcliff

5,0965 gold badges39 silver badges64 bronze badges

6 Comments

tgkprog Over a year ago

in my example its hard coded. Its from a backend web service but it can be manipulated the way we want. we can even send it in one way to the javascript and then transform it in the angular before it goes to screen (just a thought) that should not take more than a few milliseconds as its at max 100 rows of data per screen. I was just wondering that if the cols are fixed can we access them via index?

Rani Radcliff Over a year ago

You can usually access columns by index see this Plunker plnkr.co/edit/cSuLAvUY5PYUUr7YvNWF?p=preview, but I am unable to figure out how to get it to work the way your data is setup. If I come up with any ideas, I will update my answer.

tgkprog Over a year ago

I guess ngvalue for first table will be <span ng-repeat="etype in etypes" ng-value= "data.area1.rows" >{{rows[0]}}</span>

tgkprog Over a year ago

I wish i could upvote you again. Plunked helped. Solved it plnkr.co/edit/DrsXTP4kD0CnyAQwuoSu?p=preview

tgkprog Over a year ago

love angular error reporting : docs.angularjs.org/error/ngRepeat/… . Your link helped me reach a solution. Maybe you can read about this and edit your answer?

|

Collectives™ on Stack Overflow

angular 1 : populate table with ng-repeat using a 2-d array from server's json

3 Answers 3

7 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related