JSON data is available on a specific URL:
{
"href":"http:\/\/api.rwlabs.org\/v1\/jobs?limit=10",
"time":18,
"links":
{
"self":
{
"href":"http:\/\/api.rwlabs.org\/v1\/jobs?offset=0&limit=10&preset=minimal"
},
"next":
{
"href":"http:\/\/api.rwlabs.org\/v1\/jobs?offset=10&limit=10&preset=minimal"
}
},
"totalCount":2279,
"count":10,
"data":[
{
"id":"1148141",
"score":1,
"href":"http:\/\/api.rwlabs.org\/v1\/jobs\/1148141",
"fields":
{
"title":"Volunteer Renewable Energy Programmes Coordinator"
}
},
{
"id":"1147901",
"score":1,
"href":"http:\/\/api.rwlabs.org\/v1\/jobs\/1147901",
"fields":
{
"title":"Volunteer Project Management Coordinators \/ Intern"
}
}
/* etc. */
I am trying to extract information from the "data" and "fields" sections. Even though I attempted to remove the extra content before the "data" array, I still struggle to access values under "fields," which return as undefined. I am seeking a solution that does not involve removing the preceding information.
In my JavaScript code snippet below, I aim to create an HTML table displaying the extracted data:
var table = '<table><thead><th>id</th><th>title</th></thead><tbody>';
var obj = $.parseJSON(data);
$.each(obj, function(i, val) {
table += '<tr><td>' + this['id'] + '</td><td>' + this['obj[i].title'] + '</td></tr>';
});
table += '</tbody></table>';
document.getElementById("datalist").innerHTML = table;
(I currently handle the data by directly including it in the script since I do not know how to parse it from the provided URL)
To view a sample implementation in JSFiddle, visit: http://jsfiddle.net/1v803c3L/1/. Keep in mind that the entire dataset resides on the specified URL rather than within the code snippet above.