Showing only published posts from fetch json (Splash API)

I’m running a fetch on an the Splash API to get an array of all the events in the json.

I’m only looking to display those events which are published and in the json, a published node exists.

I have successfully managed to run a filter in which I have created another array with only published events, however, I cannot get the data from that new array to appear in the cards and I think that is because result is out of scope when the for loop is running?


// check if event is published function isEventLive(event) {   return event.published === true; }  fetch('api_url_here')    .then(function(response) {      if (response.status !== 200) {       console.log('Looks like there was a problem. Status Code: ' +         response.status);       return;     }      response.json().then(function(data) {       var events =;       var result = events.filter(isEventLive); // create new array with published events only       console.log(result);       appendDataToHTML(data);     });    })      .catch(function (err) {     console.log(err);     });      function appendDataToHTML(data) {       var mainContainer = document.getElementById("eventContainer");        // for each published obj, create card       for (var i = 0; i <  1; i++) {         var event_title = result[i].title;           var html =           '<div class="card">'+             '<h1>' + event_title + '</h1>'+           '<div>';          mainContainer.insertAdjacentHTML('beforeend', html);       }     }   });
<div id="eventContainer">   <!-- FETCH --> </div>

Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.