ngFor data structure

Question

There is somethign wrong with my data structure. I have resTest containing two object and keys such as pop,province, and address. I can think of couple options to do this but what would be easiest way to do this?

html

 var columnsA = ["Pop","Province","Address"];
var columnsB = ["Pop","Province","Address"];
var res = {};
res['A'] = this.columns;
res['B'] = this.columns;

    this.resTest = JSON.parse(JSON.stringify(getRes));

    //this.resTest = {A: Array(24), B: Array(24)};

    <table>
      <thead>
        <tr>
          <th>RegionA</th>
          <th>RegionB</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of this.resTest">
          <td>{{item?.A}}</td>
          <td>{{item?.B}}</td>
        </tr>
     </tbody>
     </table>

error

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables

I am expecting this data structure

{A :{…}, B: {…}}

This is what I have

{A: Array(24), B: Array(24)};

table

ngFor needs an array. You're assigning them to an object. Not entirely sure what you're trying to accomplish, but what ever is in your ngFor needs to be an array. — jassok, Dec 12 '17 at 20:47
@jassok i am literally trying to list all those keys under each of header. My question is what is best way such that I am able to list them. If I have to change my data structure to array, how should I form from what I have? — Cho Chang, Dec 12 '17 at 20:56
Could you add what you're expecting / hoping the final table would look like? — jassok, Dec 12 '17 at 20:58
@jassok Please see updated post, I tried convert to what I like to have but still can't get it working.. — Cho Chang, Dec 12 '17 at 21:01
I mean the actual table that would be out put on the front end. — jassok, Dec 12 '17 at 21:05
@jassok updated. If there are other ways such that I can literate through two object at the same time by using *ngFor, I don't really need to change my data structure.. so i am looking for easiest option to achieve this. — Cho Chang, Dec 12 '17 at 21:08
Possible duplicate of [access key and value of object using \*ngFor](https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor) — Jota.Toledo, Dec 13 '17 at 00:30

dhilt · Answer 1 · 2017-12-12T22:25:12.723

0

Since ngFor requires an Array, you JSON-parsed object needs to be refactored. This could be done via Object.keys and Array.prototype.map methods. Also, you should sort your array manually because Object.keys does not guarantee the order.

resTest = { A: [1, 2, 3], C: [3, 2, 1], B: [0, 0, 0] };

resTest = Object
  .keys(resTest)
  .sort((a, b) => {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
  })
  .map(k => ({[k]: resTest[k]}));

// [{A: [1, 2, 3]}, {B: [0, 0, 0]}, {C: [3, 2, 1]}]

After that, you'll be able to pass resTest to the ngFor.

To convert your data into two-columns dataset, again, use Array.prototype.map:

resTest = { A: [1, 2, 3], B: [9, 8, 7] };

resTest = resTest['A']
  .map((r, index) => ({ 'A': resTest['A'][index], 'B': resTest['B'][index] }));

// [{A: 1, B: 9}, {A: 2, B: 8}, {A: 3, B: 7}]

In this case you need to be sure, that A and B properties have the same length.

edited Dec 12 '17 at 22:25

answered Dec 12 '17 at 21:25

dhilt

18,707
8
70
85

This works perfectly fine but why does this append data via column? I expected to add items by rows – Cho Chang Dec 12 '17 at 21:35
@ChoChang So what do you need from this point? I believe the error should go away and `item` is an object with one property which value is an array `{ X: [...] }` – dhilt Dec 12 '17 at 21:56
@ChoChang I think, I've catched your request... see my updated answer – dhilt Dec 12 '17 at 22:25
Sorry, Okay so using your example, I simply want to display as follow. I want 1,2,3 to be displayed under A column and 9,8,7 to be displayed under B column. And I want them to be appneded by each row, not by columns. (just like I described in question ) – Cho Chang Dec 12 '17 at 22:31
note that Grade corresponds to "A" and name to "B" in my example. – Cho Chang Dec 12 '17 at 22:33
@ChoChang And I believe, I've just put the solution. Passing the last dataset to the `ngfor`, you'll get 3 rows appended to each other: (1, 9), (2, 8) and (3, 9), which exactly satisfies the requirement. – dhilt Dec 12 '17 at 22:36
I get what you are saying now.. okay but i think it has to do something with my html? i don't get any errors at this point but no output to the table – Cho Chang Dec 12 '17 at 22:51
@ChoChang It's defenitely another story. By the way I can't debug your code, especially not having it. You may create a demo on https://codepen.io or whatever and open a new question on SO, or give me the link to your demo. – dhilt Dec 12 '17 at 22:56

ngFor data structure

1 Answers1