CODEWITHSUNDEEP
javascriptjqueryhtmljson
Discover
Discover

Reputation: 197

How To Add ELSE to an IF Statement To Append

In the current DEMO you can search either one or multiple values (1001, 1002, 1003) and a JSON property feature will be pulled.

So if you search:

1001, 1002, 1003

You get:

RANK_BY_CD: 1001 => 26

RANK_BY_CD: 1002 => 212

RANK_BY_CD: 1003 => 248


var data = [];

    $(document).ready(function () {
    $("#button").click(function (any_function_variable_name) {
        var searchIds = new Set($('#searchBox').val().split(',').map(s => s.trim()));
        data.features.forEach(({ properties: { CDUID, RANK_BY_CD } }) => {
            if (searchIds.has(CDUID)) {
          $("ul")
          .append(`<li> <strong>RANK_BY_CD: </strong>${CDUID} => ${RANK_BY_CD}`);
            } else {
	$("ul")
  	return(`<li> <strong>RANK_BY_CD: </strong>${CDUID} => undefined`);
}
        });
    });
});

    function getdata() {
        var xmlhttp = new XMLHttpRequest();
        var url = "https://api.myjson.com/bins/6oj58";
        //var data = [];
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                data = JSON.parse(this.responseText);
            }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    }

    getdata();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="searchBox" type="text"></textarea>
    <button id="button">
        Search
    </button>
    <div>
        <ul></ul>
    </div>

I am trying to add an else statement where if you search a value that has no match, for example:

0001

It will return:

RANK_BY_CD: 0001 => undefined

I tried .append, return, document.write in the else portion of the if else statement and I either get nothing or errors.

Upvotes: 1

Views: 652

Answers (1)

trincot
trincot

Reputation: 350310

You should then iterate searchIds instead of data. And in that case it is better to transform the data into key/value pairs upon retrieval.

Side note: I would suggest to use the fetch API, which is much simpler to use than XMLHttpRequest:

var data = {};

$(document).ready(function () {
    $("#button").click(function (any_function_variable_name) {
        $("ul").empty();
        var searchIds = new Set($('#searchBox').val().split(',').map(s => s.trim()));
        searchIds.forEach(id => 
            $("ul").append(`<li><strong>RANK_BY_CD: </strong>${id} => ${data[id]}</li>`)
        );
    });
});

function getdata() {
    fetch("https://api.myjson.com/bins/6oj58").then(resp => resp.json()).then(resp => {
        data = Object.assign({}, ...resp.features.map(
            ({ properties: { CDUID, RANK_BY_CD } }) => ({ [CDUID]: RANK_BY_CD }))
        );
    });
}

getdata();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="searchBox" type="text"></textarea>
<button id="button">
    Search
</button>
<div>
    <ul></ul>
</div>

Upvotes: 3

Related Questions