Click here to Skip to main content
14,733,444 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
If data persent in all section of Api so not get any type error if any section is null so give me type error.

I will share you a code

this is html component file.
<div *ngIf="SingleCountryData" class="card">
                <div class="card-body">
                    Latitude & Longitude:-<p class="card-text">{{SingleCountryData[0].latlng}}</p>
                    Calling Codes:-<p class="card-text">{{SingleCountryData[0].callingCodes}}</p>
                    Alt Spellings:-<p class="card-text">{{SingleCountryData[0].altSpellings}}</p>
                    Demonym:-<p class="card-text">{{SingleCountryData[0].demonym}}</p>
                    Gini:-<p class="card-text">{{SingleCountryData[0].gini}}</p>
                    Border:-<p class="card-text">{{SingleCountryData[0].borders}}</p>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <p *ngIf="SingleCountryData" class="card-text">
                        Code:-<span><a [routerLink]="['/region/countries',SingleCountryData[0].region, SingleCountryData[0].name, SingleCountryData[0].currencies[0].code]">{{SingleCountryData[0].currencies[0].code}}</a></span><br>
                    <p  *ngIf="SingleCountryData" class="card-text">
                        iso639_1:-<span> {{SingleCountryData[0].languages[0].iso639_1}}</span><br>
                        iso639_2:-<span> {{SingleCountryData[0].languages[0].iso639_2}}</span><br>
                        Name:-<span> {{SingleCountryData[0].languages[0].name}}</span><br>
                        NativeName:-<span> {{SingleCountryData[0].languages[0].nativeName}}</span><br>
                    <p *ngIf="SingleCountryData" class="card-text">
                        <span>es:- {{SingleCountryData[0]}}</span><br>
                        <span>fr:- {{SingleCountryData[0]}}</span><br>
                        <span>ja:- {{SingleCountryData[0].translations.ja}}</span><br>
                        <span>it:- {{SingleCountryData[0]}}</span><br>
                        <span>br:- {{SingleCountryData[0]}}</span><br>
                        <span>pt:- {{SingleCountryData[0]}}</span><br>
                        <span>nl:- {{SingleCountryData[0]}}</span><br>
                        <span>hr:- {{SingleCountryData[0]}}</span><br>
                        <span>fa:- {{SingleCountryData[0].translations.fa}}</span><br>
                    <p *ngIf="SingleCountryData" class="card-text">
                        <span>Other Acronyms:-{{SingleCountryData[0].regionalBlocs[0].otherAcronyms}}</span><br>
                        <span>Other Names:-{{SingleCountryData[0].regionalBlocs[0].otherNames}}</span>
                    <p *ngIf="SingleCountryData" class="card-text">{{SingleCountryData[0].cioc}}</p>

this is ts file..
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CountryHttpService } from '../country-http.service';

  selector: 'app-single-country-view',
  templateUrl: './single-country-view.component.html',
  styleUrls: ['./single-country-view.component.css']
export class SingleCountryViewComponent implements OnInit {
  SingleCountryData: any;

  constructor(private httpservice: CountryHttpService, private _route: ActivatedRoute, private router: Router, private http: HttpClient) { }

  ngOnInit() {
    let cName = this._route.snapshot.paramMap.get('name');

            this.SingleCountryData = result;
            console.log("Get Single Country Data",this.SingleCountryData);
    error => {
      console.log("some error occured");


I shared a snapsot of output screen

Screenshot (194).png - Google Drive[^]

What I have tried:

I tried to show all data no come any error if data not present in api that show null at there blank space..
Updated 17-Nov-20 22:14pm
Richard MacCutchan 21-Oct-20 5:12am
Then you need to check what data you get. Is it valid or is it null?
Tarun Surana 21-Oct-20 5:15am
how to check data is valid or null
Richard MacCutchan 21-Oct-20 7:16am
What data? You really need to explain where in your code this problem occurs and which item is null, and under what conditions. We cannot run your code to find out.
Tarun Surana 21-Oct-20 7:18am
I have solve this query so dont worry that problem solution get from stackoverflow.
Tarun Surana 21-Oct-20 7:19am
I have a another question and also i already posted on your website.

1 solution

For those who are facing an issue similar to this, the reason that the bindings are failing here is because there is an assumption that there is actually a value at element 0 of the array. If the array is null then obviously there can't be an element 0. The way to work around this is to add the check for a null element in here like this
Latitude & Longitude:-{{SingleCountryData && SingleCountryData[0].latlng}}
An alternative would be to wrap the text portion inside something like a span and use *ngIf to control its evaluation.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900