1

I need to change country-name to "Deutschland" if API gives "Germany" in return. In all other cases code works good. Can't figure out how to do it.

JS:

<script type="text/javascript">
    function runOnLoad() {
        $.get("https://api.ipdata.co?api-key=6e6bf80b946bedd9daf3c7f799b44683b22333501994fa8af57ce0fa", function (response) {
            country_name = response.country_name;
            $("#country_name").text(country_name || 'Deutschland');
        }, "jsonp");
    }
    if(document.readyState === "complete") {
        runOnLoad();
    } else {
        window.addEventListener("onload", runOnLoad, false);
    }
</script>

HTML:

<span id="country_name">Deutschland</span>

1 Answer 1

1

Use the conditional operator inside .text:

$("#country_name").text(country_name === 'Germany' ? 'Deutschland' : country_name);

Keep in mind that it's not a good idea to implicitly create global variables (it'll even throw an error in strict mode) - best to explicitly declare the country_name variable in the .get callback:

var country_name = response.country_name;

or, in ES6 syntax:

const { country_name } = response;

Or, if you need to have multiple conditions for the name that gets displayed, you can nest the conditional operator (which makes things hard to read), or use if/else:

const displayCountryName = str => $("#country_name").text(str);

// ...
  const { country_name } = response;
  if (country_name === 'Germany') {
    displayCountryName('Deutschland');
  } else if (!country_name) {
    displayCountryName(/* insert your custom value here */);
  } else {
    displayCountryName(country_name);
  }

Or, in full:

function runOnLoad() {
    const displayCountryName = str => $("#country_name").text(str);
    $.get("https://api.ipdata.co?api-key=6e6bf80b946bedd9daf3c7f799b44683b22333501994fa8af57ce0fa", function (response) {
      const { country_name } = response;
      if (country_name === 'Germany') {
        displayCountryName('Deutschland');
      } else if (!country_name) {
        displayCountryName(/* insert your custom value here */);
      } else {
        displayCountryName(country_name);
      }
    }, "jsonp");
}
if(document.readyState === "complete") {
    runOnLoad();
} else {
    window.addEventListener("onload", runOnLoad, false);
}

If you're using jQuery, there's no need to have an if/else check for the readyState - use $ instead:

$(runOnLoad);

Live example:

function runOnLoad() {
  const displayCountryName = str => $("#country_name").text(str);
  $.get("https://api.ipdata.co?api-key=6e6bf80b946bedd9daf3c7f799b44683b22333501994fa8af57ce0fa", function(response) {
    const {
      country_name
    } = response;
    if (country_name === 'Germany') {
      displayCountryName('Deutschland');
    } else if (!country_name) {
      displayCountryName( /* insert your custom value here */ );
    } else {
      displayCountryName(country_name);
    }
  }, "jsonp");
}
$(runOnLoad);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="country_name"></div>

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

2 Comments

In my code I had condition that filled HTML with value if API call was empty. || 'Deutschland' Can you put it back if your sample? Thanks! @certainperformance
I can't figure out how to insert your code into mine. Could you write the whole code in your answer? Sorry to bother, but I noob at JS :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.