How to tell JS to only replace HTML if API request gave string?

Question

I want JS to fill my span only if API gave an actual string for both fields. If it didn't then I want it to display default value only in one field. The default value is "Germany".

Here is my code:

$(document).ready(function () {
  $.get("https://api.ipdata.co?api-key=[APIKEY]", function (response) { 
    city = response.city;
    country_name = response.country_name;
    $("#city").html(city);
    $("#country_name").replaceWith(country_name);
  }, "jsonp"); 
});

<span id="city"></span>
<span id="country_name">Germany</span>

Check if the response is a string. If so set the default value to 'x', else set the default to 'y'. — justDan, Oct 02 '19 at 18:20
Possible duplicate of [Check if a variable is a string in JavaScript](https://stackoverflow.com/questions/4059147/check-if-a-variable-is-a-string-in-javascript) — Heretic Monkey, Oct 02 '19 at 18:26

score 0 · Accepted Answer · answered Oct 02 '19 at 18:20

Firstly you should use text() not replaceWith() to set the innerText of the div. Secondly, you can use || to coerce a value if it's undefined, null, an empty string or any other falsy value. Try this:

$("#city").text(city || '');
$("#country_name").text(country_name || 'Germany');

Rodolfo Rangel · Answer 2 · 2019-10-13T06:16:33.903

0

If you want to populate both fields only if both fields are returned from the ajax request, you can simply wrap them in an if statement:

$.get("https://api.ipdata.co?api-key=[APIKEY]", (response) => {

 if(response.city && response.country_name){
  // same code here
 }

});

edited Oct 13 '19 at 06:16

answered Oct 02 '19 at 18:25

Rodolfo Rangel

596
1
3
15

How to tell JS to only replace HTML if API request gave string?

2 Answers2