调用API中的API-jQuery/HHandlebars

Calling API within API - jQuery/Handlebars

本文关键字:HHandlebars API-jQuery 中的 API 调用      更新时间:2023-09-26

我正在尝试调用两个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);
                        }
                    });

            }
        }
    });
});

请温柔并提前感谢:)

设法修复了它!只需要对最后3行进行以下更改-

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

做了很多测试,但很高兴我能弄清真相:)