Question

我正在尝试调用两个Reed作业站点API，一个是搜索雇主ID列出的所有作业，第二个是检索初始搜索中找到的所有作业ID的数据。第一个API调用的数据很好，我可以获得把手将相关数据放到页面上而没有任何问题。第二个API将调用并且数据在JS控制台中可见，但是当它在页面上显示时，控制台显示“无法读取未定义的属性'jobTitle'”。我知道它必然是简单的东西，但我对JS / API的世界相对较新，所以可以用手做！

这是我的HTML

            <div id="results">


                <table>
                    <tbody>

                        <script id="reedsearch-template" type="text/html">
                            <tr>
                                <th>{{ jobTitle }}</th>
                                <td>{{ locationName }}</td>
                                <td>£{{ minimumSalary }} - £{{ maximumSalary }}</td>
                                <td>{{ jobUrl }}</td>
                            </tr>

                        </script>


                    </tbody>


                </table>
            </div>

这是我的JS（删除了我的API密钥）

$(document).ready(function () {


var reedsearchHtml = $("#reedsearch-template").html();
var reedsearchTemplate = Handlebars.compile(reedsearchHtml); 



    $.ajax({
        type: "get",
        async: true,
        url: "http://www.reed.co.uk/api/1.0/search?employerId=p8799",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Authorization", "Basic " + btoa("API KEY:"))
        },
        success: function (data) {

            console.log(data.results);

            for (var i = 0; i < data.results.length; i++) {
                var job = data.results[i];
                var jobHtml = reedsearchTemplate(job);
                $("#results").append(jobHtml);

                    var reedUrl = "http://www.reed.co.uk/api/1.0/jobs/";
                    var id = job.jobId
                    var url = reedUrl + id;

                    $.ajax({
                        type: "get",
                        async: true,
                        url: url,
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader("Authorization", "Basic " + btoa("API KEY:"))
                        },
                        success: function (data) {

                            console.log(data);

                            var jobDetails = data.results;
                            var detailsHtml = reedsearchTemplate(jobDetails);
                            $("#results").append(detailsHtml);
                        }
                    });



            }
        }

    });

});

请保持温柔，并提前致谢：）

Answer 1

管理修复它！只需要对最后3行进行以下更改 -

var info = data;
var infoHtml = reedsearchTemplate(info);
$("#results").append(infoHtml);

进行了大量测试，但很高兴我深究其中：）

在API中调用API - jQuery / Handlebars

1 个答案: