CODEWITHSUNDEEP
javascriptiteration
Alana
Alana

Reputation: 89

.join() function does not work properly in the map function

I am trying to traverse an object using map function to the following format:

Name: Hong Kong
TopLevelDomain: .hk
Alpha2Code: HK
Alpha3Code: HKG
CallingCodes: 852
Capital: City of Victoria
AltSpellings: HK, 香港
Region: Asia
Subregion: Eastern Asia
Population: 7324300
Latlng: 22.25, 114.16666666

from the below JavaScript object:

const object = {
    "name": "Hong Kong",
    "topLevelDomain": [
        ".hk"
    ],
    "alpha2Code": "HK",
    "alpha3Code": "HKG",
    "callingCodes": [
        "852"
    ],
    "capital": "City of Victoria",
    "altSpellings": [
        "HK",
        "香港"
    ],
    "region": "Asia",
    "subregion": "Eastern Asia",
    "population": 7324300,
    "latlng": [
        22.25,
        114.16666666
    ],
    "demonym": "Chinese",
    "area": 1104.0,
    "gini": 53.3,
    "timezones": [
        "UTC+08:00"
    ],
    "borders": [
        "CHN"
    ],
    "nativeName": "香港",
    "numericCode": "344",
    "currencies": [
        {
            "code": "HKD",
            "name": "Hong Kong dollar",
            "symbol": "$"
        }
    ]
};

My attempt is:

const object = { "name": "Hong Kong", "topLevelDomain": [ ".hk" ], "alpha2Code": "HK", "alpha3Code": "HKG", "callingCodes": [ "852" ], "capital": "City of Victoria", "altSpellings": [ "HK", "香港" ], "region": "Asia", "subregion": "Eastern Asia", "population": 7324300, "latlng": [ 22.25, 114.16666666 ], "demonym": "Chinese", "area": 1104.0, "gini": 53.3, "timezones": [ "UTC+08:00" ], "borders": [ "CHN" ], "nativeName": "香港", "numericCode": "344", "currencies": [ { "code": "HKD", "name": "Hong Kong dollar", "symbol": "$" } ] };
let display = [];
let print = Object.keys(object).map(function(elem){
    if(object[elem] == 0 || object[elem] ==""){
        display = "N/A";
    } else if (typeof object[elem] =='object'){
        display = object[elem].join(", ") ;
    } else {
        display = object[elem];        
    }
    return `${elem.charAt(0).toUpperCase()}${elem.slice(1)}: ${display}`;
})
console.log(print.join('\n'));

However, an error was shown up that, and I have no idea how to deal with it. As far as i know that .join() can be used for joining element of an array. Any idea?

TypeError: object[elem].join is not a function

Upvotes: 0

Views: 1171

Answers (2)

Shashi
Shashi

Reputation: 1182

Since you have nested objects. object[elem].join does not work join is an array function and it will only work with Array. Like below

"currencies": [
        {
            "code": "HKD",
            "name": "Hong Kong dollar",
            "symbol": "$"
        }
    ]

You will need one more if for Arrays and will need to use a recursive function when there is a nested object

function print(object) {
  let objMap= Object.keys(object).map(function(elem){
    if(object[elem] == 0 || object[elem] ==""){
        display = "N/A";
    } else if (object[elem].constructor === Array){
        display = object[elem].join(", ") ;
    } else if (typeof object[elem] =='object'){
        display = print(object[elem]);
    } else {
        display = object[elem];        
    }
    return `${elem.charAt(0).toUpperCase()}${elem.slice(1)}: ${display}`;
  });
  console.log(objMap.join('\n'));
}

Upvotes: 1

Queens Coder
Queens Coder

Reputation: 464

You're code works fine. All arrays are objects in javascript so typeof can be unhelpful.

.join is an array method and to ensure that is being run on a valid array I would use Array.isArray() instead of using typeof.

Array.isArray() returns true if the value passed in is an Array and false if not.

I agree with Shashi above, when dealing with nesting objects/arrays.

A simple while loop would work when you have to evaluate which data type you are working with.

Upvotes: 0

Related Questions