Unable to display data from AJAX call JSON data with jQuery

Question

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

I suppose that key, query, geo, distance, tempperm are parameters to pass to the URL ? — Hamza Abdaoui
– Hamza Abdaoui, Commented Mar 7, 2018 at 14:52
is it safe to assume that the . in tempperm: ['Part Time', 'Permanent']. is unintentional and is really a , in your source? — Josh E
– Josh E, Commented Mar 7, 2018 at 15:03
Next time you have trouble with an AJAX call, make sure to examine the structure of the outgoing request as closely as you study the structure of the response! — Josh E
– Josh E, Commented Mar 7, 2018 at 15:08

Hamza Abdaoui · Accepted Answer · 2018-03-07 15:36:20Z

1

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));
});

edited Mar 7, 2018 at 15:36

answered Mar 7, 2018 at 15:06

Hamza Abdaoui

2,2274 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chris Yates Over a year ago

this is strange because it shows the data in the console window {jobs: Array(25), total_entries: 220}

Hamza Abdaoui Over a year ago

You are doing $.each(data.results but the returned data does not contain any thing with the name results

Hamza Abdaoui Over a year ago

I've edited the answer with a part to loop the jobs list. Hope it helps.

Chris Yates Over a year ago

spotted it .. replaced results with jobs.. working great ! thanks

user6016913 · Accepted Answer · 2018-03-07 15:01:04Z

0

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));
    });
}

answered Mar 7, 2018 at 15:01

user6016913

1912 silver badges10 bronze badges

Collectives™ on Stack Overflow

Unable to display data from AJAX call JSON data with jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related