I am in the process of integrating an external web service to incorporate remote data alongside my local data, pertaining to various events happening in the United Kingdom. These events will be fetched based on search parameters like name or date. The eventful API is going to be utilized for this purpose.
Javascript Sample page <br>
<script type="text/javascript" src="http://api.eventful.com/js/api">
</script>
<script type="text/javascript">
function show_alert()
{
var oArgs = {
app_key:"MY APP KEY",
id: "20218701",
page_size: 25 ,
};
EVDB.API.call("/events/get", oArgs, function(oData) {
// Note: this relies on the custom toString() methods below });
alert("your myObject is " + JSON.stringify(oData) );
});
}
function show_alert2()
{
var oArgs = {
app_key: "MY APP KEY",
q: "music",
where: "United Kingdom",
"date": "2013061000-2015062000",
page_size: 5,
sort_order: "popularity",
};
EVDB.API.call("/events/search", oArgs, function(oData) {
// Note: this relies on the custom toString() methods below
alert("your myObject is " + JSON.stringify(oData));
});
}
</script>
Upon triggering the alert, a lengthy string of JSON data related to the hardcoded search query is displayed. The challenge lies in extracting only the relevant data from this extensive string.
If you take a look at this example string, you'll see that I am interested in retrieving core details such as event name, description, date, venue name, town, and postcode.
Here's the updated code snippet:
<script type="text/javascript" src="http://api.eventful.com/js/api">
</script>
<script type="text/javascript">
function show_alert2()
{
var oArgs = {
app_key: "MY KEY",
q: "music",
where: "United Kingdom",
"date": "2013061000-2015062000",
page_size: 5,
sort_order: "popularity",
};
EVDB.API.call("/events/search", oArgs, function(oData) {
// Note: this relies on the custom toString() methods below
let obj = JSON.stringify(oData);
return obj;
});
}
function simplifyObject(obj){
return obj.events.event.map((x) => { return { title: x.title, description: x.description, date: x.start_time, venue_name: x.venue_name, venue_address: x.venue_address, postal_code: x.postal_code } });
}
var result = simplifyObject(obj);
console.log(result[0].title);
</script>
For executing the current search, my approach involves using `onkeydown="show_alert2()"` which triggers the corresponding function to display the variable result.
<div class="panel panel-default" onkeydown="show_alert2()">
<div class="panel-heading" ng-init="getEvents()">
<h3 class="panel-title">Latest events</h3>
</div>
<div>
<input type="text" ng-model="search" placeholder="Search for events, venues, or dates" size="40">
<div class="panel-body">
<div class="row">
<div ng-repeat="event in events | filter:search">
<div class="col-md-3">
<div class="col-md-6">
<h4>{{event.title}}</h4>
<p>{{event.desc}}</p>
<p>{{event.venue.name}}</p>
<a class="btn btn-primary" href="#!/events/details/{{event._id}}">View event</a>
</div>
<div class="col-md-6">
<img class="thumbnail" src="{{event.venue.icon}}">
</div>
</div>
</div>
</div>
</div>
</div>