CODEWITHSUNDEEP
javascriptjquerystring
DanielsV
DanielsV

Reputation: 892

How to make JavaScript to change string if it matches another string?

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>

Upvotes: 1

Views: 42

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371019

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>

Upvotes: 1

Related Questions