How to set "N/A" if data is null in angular

Question

Lets say i have a table and sometimes few data's can be null but null data are showing undefined at the table instead of showing undefine i want to show "N/A" how can i achieve that ill share an image and a code below.

at the above image under reference data some of the data showing undefine because it is null i want it to show "N/A". I'll share the code below. Below code there is "a.normalRange" variable that variable holds the reference data.

 var col = ["Test Name", "Result", "Unit" , "Reference"];
    this.xyz.forEach((a) => {
      medicineInfo = this.xyz.find(x => x.id == a.id);
      rows.push(['' + a.xyz+' '+ a.xyz+ '', '' + a.xyz+ '', '' + a.xyz,'' + a.xyz]);
    });

And this is how i print the table

 doc.autoTable({
            columnStyles: {
              0: { cellWidth: 45 },
              1: { cellWidth: 45 },
              2: { cellWidth: 45 },
              3: { cellWidth: 45 }
            },
            head: [col],
            body: rows,
            startY: 100,
            theme: 'plain',
            tableLineColor: [242, 238, 238],
            tableLineWidth: 0.5,
            styles: {
              font: 'courier',
              lineColor: [242, 238, 238],
              lineWidth: 0.5
            },
          });

i didnt use html for this code i use the jspdf and solve it in typescript(angular) — KingCk
– KingCk, Commented Sep 30, 2022 at 7:47
It's one of Angular's most frustrating thing: Building tables and manipulate the data for display. In my personal experience (or what I've done) I either, build a middle-ware on the back-end so that the API sends the data as expected for display, or, I build a special "table" model. But I'm sure someone might have a more effective solution... — Martin Carre
– Martin Carre, Commented Sep 30, 2022 at 7:54

Roy · Accepted Answer · 2022-09-30 08:13:16Z

4

If any other value need to be checked call isValueEmpty method with that value.

const col = ["Test Name", "Result", "Unit" , "Reference"];
this.hubxDataItemSpList.forEach((a) => {
    medicineInfo = this.hubxDataItemSpList.find(x => x.id == a.id);
    const normalRange = changeIfValueEmpty(a.normalRange);
    rows.push(['' + a.categoryName +' '+ a.itemTitle + '', '' + a.itemValue + '', '' + a.itemUnit ,'' + normalRange]);
});

function changeIfValueEmpty(value) {
    value = value ?? ''; // reassigned if value is null or undefined
    return (value value.trim() === '') ? 'N/A' : value; // to check value only contains whitespace
}

edited Sep 30, 2022 at 8:13

Roy

8,1295 gold badges29 silver badges49 bronze badges

answered Sep 30, 2022 at 7:48

sasi66

4472 silver badges7 bronze badges

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

Comments

MGX · Accepted Answer · 2022-09-30 07:55:02Z

3

Use the coalescing operator, which tests for null and undefined.

{{ item.value ?? 'N/A' }}

If you also want 0 and '' to be counted as N/A, then use the short circuit :

{{ item.value || 'N/A' }}

Or, apply this to your TS logic (and also improve it) :

rows.push([
  `${a.categoryName} ${a.itemTitle}`.trim() ?? 'N/A',
  a.itemValue ?? 'N/A',
  a.itemUnit ?? 'N/A',
  a.normalRange ?? 'N/A',
]);

(You can apply this to every line if you want)

edited Sep 30, 2022 at 7:55

answered Sep 30, 2022 at 7:31

MGX

3,5415 silver badges19 bronze badges

7 Comments

sasi66 Over a year ago

since numbers are coming OR (||) operator might show N/A for 0 value too.

MGX Over a year ago

@sasi66 maybe you should pay better attention to what I wrote.

KingCk Over a year ago

still showing undefined i have tried both

MGX Over a year ago

@KingCk in that case it means the value of your variable is 'undefined', as a string.

KingCk Over a year ago

a.normalRange data is a string so how do i fix it

|

Edmunds Folkmanis · Accepted Answer · 2022-09-30 07:53:03Z

2

Create angular 'pipe' that returns 'N/A' when value is undefined or null. And use it in html code when needed.

answered Sep 30, 2022 at 7:53

Edmunds Folkmanis

5922 silver badges9 bronze badges

2 Comments

Martin Carre Over a year ago

That one could actually be very elegant.

MGX Over a year ago

Overkill when a simple operator ?? can do the same thing.

Collectives™ on Stack Overflow

How to set "N/A" if data is null in angular

3 Answers 3

Comments

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related