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

Question

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!

JSON is a string format used for data exchange. If it has been parsed, it then is (generally speaking), a JavaScript object (i.e. it is no longer a string). JavaScript objects do not inherently have a `has` function. Are you trying to see if a [specific property exists](https://stackoverflow.com/questions/135448/how-do-i-check-if-an-object-has-a-specific-property-in-javascript)? — crashmstr, Jun 11 '21 at 15:57
@crashmstr it answer my question, I change the json.has() into son._embedded.events[i].sales.hasOwnProperty('presales') and it worked until Loop #4. But when it reaches Loop #5, I'm having a problem "Uncaught TypeError: Cannot read property 'startDateTime' of undefined at showEvents (apijs.js:41)" Any idea? — James Raymundo, Jun 11 '21 at 16:24
Should you be looping over `presales` separately if it is an array? — crashmstr, Jun 11 '21 at 16:26
@crashmstr Yes because I'm checking whether every loop contains the property "presale". If you mind looking in this screenshot, https://i.stack.imgur.com/dabNC.png — James Raymundo, Jun 11 '21 at 16:32
I don't think you can do this with a single loop. Instead, loop over the sales.public array making rows for public things. Then loop over the sales.presales array making rows for presales things. — James, Jun 11 '21 at 16:50
You have *one* indexing variable and are indexing `events` and `presales` so in each loop, you skip more presales and crash when you try and access properties on an element that has no data. — crashmstr, Jun 11 '21 at 16:51
@James do you mind giving me an example? I'm so confused right now. tysm. — James Raymundo, Jun 11 '21 at 16:57
@crashmstr do you mind giving me an example? I'm so confused right now. tysm. — James Raymundo, Jun 11 '21 at 17:05
`for (let i = 0; i < i_stuf.length; ++i) for (let j = 0; j < i_stuff[i].j_stuff.length; ++j) console.log(i_stuff[i].j_stuff[j])` — crashmstr, Jun 11 '21 at 17:14
You need to iterate over each array from start to finish. The data *may* have counts or sizes somewhere else, but using `i` to index into two separate arrays, one contained inside the objects of a property of the other is not going to work. Iterate over each array from `0` to `length` of that array. — crashmstr, Jun 11 '21 at 17:16
[Understanding nested for loops in javascript](https://stackoverflow.com/questions/36413159/understanding-nested-for-loops-in-javascript) — crashmstr, Jun 11 '21 at 17:17
This doesn't work for me, I search for another events, it stops every time in loop #5. I don't know what to do now. Please look at this screenshot @crashmstr https://i.stack.imgur.com/1nK2X.png — James Raymundo, Jun 11 '21 at 17:30
This is the API link, https://app.ticketmaster.com/discovery/v2/events.json?keyword="Kesha"&size=10&apikey=Q8G0vn5ycUgMPGsnCGqLe1ZCP6GyY1uR I use postman to beautify the JSON data — James Raymundo, Jun 11 '21 at 17:31
As you can see there are six results wherein all six results have "presales" on them. I just don't understand why it stops in Loop #5. — James Raymundo, Jun 11 '21 at 17:32
The problem is how many presale elements are there, and where in the array are they. Your first loop is `json._embedded.events[0].sales.presales[0].startDateTime`, your second loop is `json._embedded.events[1].sales.presales[1].startDateTime`, your third is `json._embedded.events[3].sales.presales[3].startDateTime`, your fourth is `json._embedded.events[4].sales.presales[4].startDateTime`, your fifth is `json._embedded.events[5].sales.presales[5].startDateTime`. You should have seen this in the debugger and notice this is not "normal" iteration of the all `presales` for each `event`. — crashmstr, Jun 11 '21 at 19:44

score 0 · Answer 1 · answered Jun 11 '21 at 16:26

Here's the answer that I got, I change the json.has() into json._embedded.events[i].sales.hasOwnProperty('presales') and it worked until Loop #4. But when it reaches Loop #5, I'm having a problem Uncaught TypeError: Cannot read property 'startDateTime' of undefined at showEvents (apijs.js:41), Any idea?

Here's the screenshot.

Please see this screenshot.

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

1 Answers1