Question

后台：我正在尝试提取JSON数据以填充职业部分。我已在第一个$.getJSON()请求中成功请求并提取了JSON数据并填充了标题。下一步是提取过帐ID URL并打开第二个请求以提取描述和应用URL。

问题：第二个请求有效，因为我可以看到对象被拉入控制台但由于某种原因我的循环没有填充带有描述或URL的部分。我也没有收到任何控制台错误，这使得查明问题变得有点困难。它与异步请求有什么关系吗？我是AJAX，JSON和API的第一次修补工具。

有关API的一些文档，如果需要： https://dev.smartrecruiters.com/customer-api/posting-api/

// Create variable to append postings to
var postingsContainer = document.querySelector('div.job-container');

// Creates postings JSON request
$.getJSON('https://api.smartrecruiters.com/v1/companies/SynchronyGroup/postings', function(postings) {

    // Check to see if data is being pulled
    console.log(postings);

    showJobs(postings);

});

// Function that pulls json data and populates careers section
function showJobs(jsonObj) {

    // Variable that holds job postings json data
    var jobs = jsonObj['content']

    // Loop to create open position elements
    for (var i = 0; i < jobs.length; i++) {

        // Creates Column for job postings
        var jobPosting = document.createElement('div')
        jobPosting.setAttribute('class', 'col-12 col-md-6 col-lg-4 my-5 job-posting');

        // Creates Job Title 
        var jobH5 = document.createElement('h5');
        jobH5.textContent = jobs[i].name;

        jobPosting.appendChild(jobH5);
        postingsContainer.appendChild(jobPosting);

        // Store job post IDs in var
        var jobId = jobs[i].ref;

        // Creates post 2nd ID JSON request
        $.getJSON(jobId, function(data) {

            // Check to see if data is being pulled
            console.log(data);

            showDetails(data);

        });

    }
}

//Function for posting description and apply url
function showDetails(data) {

    // Loop to pull company description and apply url, then append to job posting element
    for (var j = 0; j < data.length; j++) {

        console.log("I work");

        // Creates Company Desc. and Apply Link
        var jobDetail = document.createElement('p');
        var jobApply = document.createElement('a');

        jobDetail.textContent = data[j].sections.companyDescription;
        jobApply.setAttribute('href', data[j].applyUrl);
        jobApply.setAttribute('class', 'btn-primary');

        jobPosting.appendChild(jobDetail);
        jobPosting.appendChild(jobApply);

    }
}

Answer 1

您的主要问题是 jobPosting var的价值。

此变量在每次循环迭代时在 showJobs 函数中创建，但您永远不会将此变量传递给 showDetails 函数。

因为在每次迭代时都会创建此变量，所以您需要确保传递正确的值（有关更多信息，您可以查看js closure及其工作原理）。在你的情况下，因为 $。getJSON（jobId，function（data）{你不能简单地使用变量名。如果是这样，你将传递最后一个值：你在结束时的值这意味着你需要关闭上下文。

为了达到这个目的，您可以使用IIFE。有关此问题的详细信息，请参阅此问题：What is the (function() { } )() construct in JavaScript?。

示例：

＆＃13;

// Create variable to append postings to
var postingsContainer = document.querySelector('div.job-container');

// Creates postings JSON request
$.getJSON('https://api.smartrecruiters.com/v1/companies/SynchronyGroup/postings', function (postings) {

    // Check to see if data is being pulled
    //console.log(postings);

    showJobs(postings);

});

// Function that pulls json data and populates careers section
function showJobs(jsonObj) {

    // Variable that holds job postings json data
    var jobs = jsonObj['content']

    // Loop to create open position elements
    for (var i = 0; i < jobs.length; i++) {

        // Creates Column for job postings
        var jobPosting = document.createElement('div');
        jobPosting.setAttribute('class', 'col-12 col-md-6 col-lg-4 my-5 job-posting');

        // Creates Job Title
        var jobH5 = document.createElement('h5');
        jobH5.textContent = jobs[i].name;

        jobPosting.appendChild(jobH5);
        postingsContainer.appendChild(jobPosting);

        // Store job post IDs in var
        var jobId = jobs[i].ref;

        //
        //
        // IIFE
        (function (jobPosting) {
            // Creates post 2nd ID JSON request
            $.getJSON(jobId, function (data) {

                // Check to see if data is being pulled
                //console.log(data);

                showDetails(data, jobPosting);

            })
        }(jobPosting));

    }
}
//Function for posting description and apply url
function showDetails(data, jobPosting) {

    // Loop to pull company description and apply url, then append to job posting element
    //for (var j = 0; j < data.length; j++) {

    //console.log("I work");

    // Creates Company Desc. and Apply Link
    var jobDetail = document.createElement('p');
    var jobApply = document.createElement('a');

    jobDetail.textContent = 'showDetails: ' + data.company.name;
    jobApply.setAttribute('href', data.applyUrl);
    jobApply.setAttribute('class', 'btn-primary');

    jobPosting.appendChild(jobDetail);
    jobPosting.appendChild(jobApply);

    //}
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="job-container"></div>

＆＃13;

Answer 2

签出此工作代码只需更改此行var jobs = jsonObj['content']即可。将行更改为var jobs = jsonObj.content;

// Create variable to append postings to
var postingsContainer = document.querySelector('div.job-container');

// Creates postings JSON request
$.getJSON('https://api.smartrecruiters.com/v1/companies/SynchronyGroup/postings', function(postings) {

    // Check to see if data is being pulled
    //console.log(postings);

    showJobs(postings);

});

// Function that pulls json data and populates careers section
function showJobs(jsonObj) {

    // Variable that holds job postings json data
    var jobs = jsonObj.content;

    // Loop to create open position elements
    for (var i = 0; i < jobs.length; i++) {

        // Creates Column for job postings
        var jobPosting = document.createElement('div')
        jobPosting.setAttribute('class', 'col-12 col-md-6 col-lg-4 my-5 job-posting');

        // Creates Job Title 
        var jobH5 = document.createElement('h5');
        jobH5.textContent = jobs[i].name;

        jobPosting.appendChild(jobH5);
        postingsContainer.appendChild(jobPosting);

        // Store job post IDs in var
        var jobId = jobs[i].ref;

        // Creates post 2nd ID JSON request
        $.getJSON(jobId, function(data) {

            // Check to see if data is being pulled
            //console.log(data);

            showDetails(data);

        });

    }
}

//Function for posting description and apply url
function showDetails(data) {

    // Loop to pull company description and apply url, then append to job posting element
    for (var j = 0; j < data.length; j++) {

        console.log("I work");

        // Creates Company Desc. and Apply Link
        var jobDetail = document.createElement('p');
        var jobApply = document.createElement('a');

        jobDetail.textContent = data[j].sections.companyDescription;
        jobApply.setAttribute('href', data[j].applyUrl);
        jobApply.setAttribute('class', 'btn-primary');

        jobPosting.appendChild(jobDetail);
        jobPosting.appendChild(jobApply);

    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="job-container"></div>

for（）循环在第二个$ .getJSON请求中不起作用

2 个答案: