CODEWITHSUNDEEP
jqueryajax
Chris Yates
Chris Yates

Reputation: 243

Unable to display data from AJAX call JSON data with jQuery

Really puzzled by this so help would be great

Im trying to view JSON data from a job search API

Query Below ( access key had to be removed )

$.ajax({
type: "GET",
url: "https://www.cv-library.co.uk/search-jobs-json?",
key: '',
query: 'Support',
geo: 'London',
distance: 200,
tempperm: ['Part Time', 'Permanent'].
success: function(data)
{
    console.log(data);

    $.each(data.results, function(i, val) {
        // here you can do your magic
        $("#joblist").append(document.createTextNode(val.title));
        $("#joblist").append(document.createTextNode(val.logo));
    });
}

});

Here is the data it should be returning

{
"jobs": [
   {
        "agency": {
            "title": "BCT Resourcing",
            "type": "Recruitment Agency",
            "url": "https://www.cv-library.co.uk/list-jobs/289229/BCT-Resourcing"
        },
        "applications": "<10",
        "description": "Position: Automation & Monitoring Engineers\nLocation: Hampshire\nSalary: \u00a340000- \u00a355000 Per Annum\nJob type: Permanent\n\nDescription\n Candidates must have lived in the UK for 5 years minimum in order to achieve the security clearance required for this role.\n \nOur client work with a number of exciting and often cutting-edge technologies in a fast-moving environment.  With this environment, great automation and monitoring delivers huge value in both pace and accuracy for our team and Customers, in turn increasing our capability.  Our team are responsible for the management platform, tools and systems to automate, manage and monitor infrastructure",
        "distance": 3,
        "hl_title": "Automation & Monitoring Engineers",
        "id": "205765440",
        "location": "Farnborough",
        "logo": "https://www.cv-library.co.uk/logo/big/bac0998768784a75beea9b928d5c8c89",
        "posted": "2017-04-26T10:31:27Z",
        "salary": "\u00a340000 - \u00a355000/annum",
        "title": "Automation & Monitoring Engineers",
        "type": [
            "Permanent"
        ],
        "url": "/job/205765440/Automation-Monitoring-Engineers?hlkw=Perl&s=101081"
    }
],
"total_entries": 13

But I get nothing.. Help would be great thanks in advance

Upvotes: 0

Views: 42

Answers (2)

Hamza Abdaoui
Hamza Abdaoui

Reputation: 2209

To pass parameters to the url, you need to use the data parameter for the $.ajax() function.

From your url, it seems that the method used by the remote is GET, so this code should work : 

var myData = encodeURIComponent("key=YourKey&query=Support&geo=London&distance=200&tempperm=Part Time");
$.ajax({
 type: "GET",
 url: "https://www.cv-library.co.uk/search-jobs-json",
 data = myData,
 success: function(data)
 {
    console.log(data);

    $.each(data.results, function(i, val) {
        // here you can do your magic
        $("#joblist").append(document.createTextNode(val.title));
        $("#joblist").append(document.createTextNode(val.logo));
    });
 }

});

Edit : From you comment below, the returned data is like this {jobs: Array(25), total_entries: 220}, so to loop the jobs, you need to do this : 

$.each(data.jobs, function(i, val) {
    $("#joblist").append(document.createTextNode(val.agency.title));
    $("#joblist").append(document.createTextNode(val.logo));
});

Upvotes: 1

user6016913
user6016913

Reputation: 191

Try below. If you get same error, check that JSON is valid or invalid.

success: function(data) {
    var res = $.parseJSON(data);
    $.each(res.jobs, function(i, val) {
        $("#joblist").append(document.createTextNode(val.title));
        $("#joblist").append(document.createTextNode(val.logo));
    });
}

Upvotes: 0

Related Questions