Check whether a JSON Value/Array exist using JavaScript and display data in a Table

  javascript, json

I’m using Ticketmaster’s API. Here’s a sample data coming from their API,

Data 1 – Where "presales" exist.

"sales": {
                "public": {
                    "startDateTime": "2019-11-22T17:00:00Z",
                    "startTBD": false,
                    "startTBA": false,
                    "endDateTime": "2021-09-25T23:00:00Z"
                },
                "presales": [
                    {
                        "startDateTime": "2019-11-18T16:37:00Z",
                        "endDateTime": "2019-11-22T04:00:00Z",
                        "name": "Verified Fan Presale"
                    },
                    {
                        "startDateTime": "2019-11-18T16:37:00Z",
                        "endDateTime": "2019-11-22T04:00:00Z",
                        "name": "American Express® Card Member Presale"
                    },
                    {
                        "startDateTime": "2019-11-18T16:37:00Z",
                        "endDateTime": "2019-11-23T04:00:00Z",
                        "name": "Verified Fan Platinum Presale"
                    },
                    {
                        "startDateTime": "2019-11-22T17:00:00Z",
                        "endDateTime": "2021-09-12T03:00:00Z",
                        "name": "American Express® Card Member Onsale"
                    },
                    {
                        "startDateTime": "2019-11-22T17:00:00Z",
                        "endDateTime": "2021-09-25T20:00:00Z",
                        "name": "Official Platinum Onsale"
                    }
                ]
            }

Data 2 – Where "presales does not exist

"sales": {
                "public": {
                    "startDateTime": "2020-03-06T15:00:00Z",
                    "startTBD": false,
                    "startTBA": false,
                    "endDateTime": "2021-11-01T00:00:00Z"
                }
            }

Assuming we have Data 1,2,3, and so on. Some have presales on them and some does not. I’m looping very data available in the API.

Here’s my source code, and let us assume that startdateid and enddateid is "invalid".

function showSearch(){
    var kword = document.getElementById("searchTxt").value;
    var inputCountry = document.getElementById("inputCountry").value;
    var startdateid = new Date(document.getElementById("startdateid").value);
    var enddateid = new Date(document.getElementById("enddateid").value);
    if ( isNaN( startdateid.getTime() ) ) { 
        startdateid = "invalid";
    }
    if ( isNaN( enddateid.getTime() ) ) { 
        enddateid = "invalid";
    }

    $.ajax({
        type:"GET",
        url:"https://app.ticketmaster.com/discovery/v2/events.json?keyword=" + kword + "&countryCode="+ inputCountry +"&size=200&apikey=Q8G0vn5ycUgMPGsnCGqLe1ZCP6GyY1uR",
        async:true,
        dataType: "json",
        success: function(json) {
                    console.log(json);
                    var e = document.getElementById("eventsfound");
                    e.innerHTML = json.page.totalElements + " events found.";
                    showEvents(json,startdateid,enddateid);
                },
        error: function(xhr, status, err) {
                }
    });
}

function showEvents(json,startdateid,enddateid) {
    var table = $('#example2').DataTable();
    var presaleStartCheck;
    var presaleEndCheck;
    var presaleNameCheck;
    table.clear();
    for(var i=0; i<json.page.size; i++) {
        var eDate = new Date(json._embedded.events[i].dates.start.localDate);
        var counter = i + 1;

        if((startdateid=="invalid") && (enddateid=="invalid")){
            if(json.has("presales")){
                presaleStartCheck = json._embedded.events[i].sales.presales[i].startDateTime;
                presaleEndCheck = json._embedded.events[i].sales.presales[i].endDateTime;
                presaleNameCheck = json._embedded.events[i].sales.presales[i].name;
               }else{
                presaleStartCheck = "Not applicable";
                presaleEndCheck = "Not applicable";
                presaleNameCheck = "Not applicable";
               }
            table.row.add( [
                counter,
                json._embedded.events[i].name,
                json._embedded.events[i].dates.start.localDate,
                json._embedded.events[i].dates.start.localTime,
                json._embedded.events[i].url,
                presaleStartCheck,
                presaleEndCheck,
                presaleNameCheck,
            ] ).draw();
        }
    }
}

showSearch();

What I’m trying to do here is in every loop of may be (10 to 20, etc. times) If a certain loop detects that the json.has("presales"), it will use the following indicated in the else statement, and if it does not have. It will just use Not Applicable as per stated in the else statement.

But I can’t seem to make it work, the e.innerHTML = json.page.totalElements + " events found."; is working where how many events are found. But I can’t make the data display in the table because I’m catching an error on my json.has("presales") part. which is Uncaught TypeError: json.has is not a function

Here’s the screenshot of what I’m trying to do and the error itself.

Please check this screenshot, thank you.

Any help will be much appreciated. Thank you so much!

Source: Ask Javascript Questions

LEAVE A COMMENT