Angular fill empty table column

Question

I'm new to angular and I'm parsing JSON into DOM-elements.

A part of the JSON response:

"fabricAnswers": [
        {
            "id": 11,
            "answer": "daily active users",
            "answerValue": 7,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 12,
            "answer": "daily new users",
            "answerValue": 1,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 13,
            "answer": "monthly active users",
            "answerValue": 272,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 14,
            "answer": "crash-free users",
            "answerValue": 100,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 15,
            "answer": "sessions",
            "answerValue": 9,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 16,
            "answer": "daily active users",
            "answerValue": 10,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 17,
            "answer": "daily new users",
            "answerValue": 4,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 18,
            "answer": "monthly active users",
            "answerValue": 480,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 19,
            "answer": "crash-free users",
            "answerValue": 100,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 20,
            "answer": "sessions",
            "answerValue": 11,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        }
    ]

And I'm looping through the JSON with this HTML-Code;

 <div class="row ">
<div class="col-xs-12 col-sm-3" *ngFor="let statistic of statistic.statistics">
  <div class="block">
    <div class='block-body'> {{ statistic.appName }} </div>
    <table>
      <tr>
        <th>Syncdate</th>
        <th><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Android_robot.svg/2000px-Android_robot.svg.png" alt="" border=3 height=30 width=25></th>
        <th><img src="https://cayland.com/images/ios-logo.png" alt="" border=3 height=30 width=60></th>
      </tr>
      <tr *ngFor="let info of statistic.fabricAnswers">
        <td *ngIf="info.platform == 'android'"> {{info.answer}}</td>
        <td *ngIf="info.platform == 'android'"> {{info.answerValue}}</td>
        <td *ngIf="info.platform == 'ios'">{{info.answerValue}}</td>
      </tr>
    </table>
  </div>
</div>

The output on screen of 1 tile:

As you can see the iOS details are rendered below. This happens because <td *ngIf="info.platform == 'ios'">{{info.answerValue}}</td> is empty while parsing the 'Android' elements. How can I fill the empty column with iOS details?

EDIT: I implemented what Parkar said:

Component.HTML:

<div class="row ">
<div class="col-xs-12 col-sm-3" *ngFor="let statistic of statistic.statistics">
  <div class="block">
    <div class='block-body'> {{ statistic.appName }} </div>
    <table>
      <tr>
        <th>Syncdate</th>
        <th><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Android_robot.svg/2000px-Android_robot.svg.png" alt="" border=3 height=30 width=25></th>
        <th><img src="https://cayland.com/images/ios-logo.png" alt="" border=3 height=30 width=60></th>
      </tr>
      <tr *ngFor="let info of statistic.fabricAnswers">
        <td *ngIf="info.platform == 'android'"> {{info.answer}}</td>
        <td *ngIf="info.platform == 'android'"> {{info.answerValue}}</td>
        <!--<td *ngIf="info.platform == 'ios'">{{info.answerValue}}</td>-->
        <td>{{getIphoneValue(statistic.fabricAnswers, info)}}</td>
      </tr>
    </table>
  </div>
</div>

component.ts:

export class StatisticsComponent implements OnInit {

constructor(private statistic: HttpclientService) { }

 ngOnInit() {}

 getIphoneValue(list: any[], info: any) {
    return list.find(i =>
    i.answer === info.answer && i.platform === 'ios'
  ).answerValue;
}
}

The output on screen:

The error message I Get:

ERROR TypeError: Cannot read property 'answerValue' of undefined
at StatisticsComponent.getIphoneValue (statistics.component.ts:18)
at Object.eval [as updateRenderer] (StatisticsComponent.html:16)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
at checkAndUpdateView (core.js:13849)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)

Pankaj Parkar · Accepted Answer · 2018-05-01 12:54:55Z

2

Only show up android platform answer and grab ios platform questions answerValue via function or probably you can write Pure Pipe(more performant).

<ng-container *ngFor="let info of fabricAnswers">
    <tr *ngIf="info.platform == 'android'">
        <td *ngIf="info.platform == 'android'"> {{info.answer}}</td>
        <td *ngIf="info.platform == 'android'"> {{info.answerValue}}</td>
        <td>{{getIphoneValue(fabricAnswers, info)}}</td>
    </tr>
</ng-container>

Code

getIphoneValue(list: any[],info: any) {
   var iosItem = list
     .find(i => 
        i.answer == info.answer && i.platform === 'ios'
     );
    return iosItem ? iosItem.answerValue: '';
}

Stackblitz Demo

edited May 1, 2018 at 12:54

answered May 1, 2018 at 10:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

9 Comments

jozofe Over a year ago

thank you for your answer but I get this error: ERROR TypeError: Cannot read property 'answerValue' of undefined at StatisticsComponent.getIphoneValue (statistics.component.ts:21) at Object.eval [as updateRenderer] (StatisticsComponent.html:16) at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)

Pankaj Parkar Over a year ago

@jozofe you have to tweak variable names, like here I used different to make demo working and more understandable

jozofe Over a year ago

yes I exactly copied your code. But in the getIphoneValue() function it says after answerValue: "Missing semicolon". Am I using a different version of angular?

Pankaj Parkar Over a year ago

Add semicolon there after answerValue

Pankaj Parkar Over a year ago

Not sure, what's wrong. But I'm sure it has nothing to do with Angular versions

|

jozofe · Accepted Answer · 2018-05-02 12:40:40Z

0

I fixed the problem by using a pipe:

export class IospipePipe implements PipeTransform {
transform(value: any[], info: any): any {
for (const i of value) {
  if (i.answer === info.answer && i.platform === 'ios') {
    return i.answerValue;
  }
}
return null;
}

}

answered May 2, 2018 at 12:40

jozofe

798 bronze badges

Collectives™ on Stack Overflow

Angular fill empty table column

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related