Question

我试图从API中抓取一些数据并将数据转换到我自己的网站。

API获取请求： http://api.reliefweb.int/v1/jobs?preset=latest&filter[field]=status&filter

我试图显示所有＆＃34;标题＆＃34;来自我自己网站上的api。但不知怎的，它不起作用。我确定我安装了jquery。使用代码段：<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

但是当我加载html文件时没有任何显示。

<!DOCTYPE HTML>

<html>
    <head>
    <title>Relief Web</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    <script>

        $(document).ready(function() {

            $.getJSON('http://api.reliefweb.int/v1/jobs?preset=latest&filter[field]=status&filter', function(reliefResult) {

                document.write(reliefResult.title);

            });

        });
    <script>

</head>
<body>
</body>
</html>

Answer 1

由于undefined是title数组中对象的属性，因此您的代码将显示data。您需要遍历该数组并创建所需的元素。试试这个：

$.getJSON('https://api.reliefweb.int/v1/jobs?preset=latest&filter[field]=status&filter', function(reliefResult) {
    $.each(reliefResult.data, function(_, data) {
       	$('div').append('<p>' + data.fields.title + '</p>');
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

jQuery提供了许多添加和修改DOM内容的方法，因此您应该避免使用document.write。

Answer 2

$(document).ready(function() {

  $.getJSON('http://api.reliefweb.int/v1/jobs?preset=latest&filter[field]=status&filter', function(reliefResult) {

    reliefResult.data.forEach(function(record) {
      $('body').append('<div>' + record.fields.title + '</div>');

    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

您必须使用从API响应中获得的该JSON对象的属性和子属性。

$(document).ready(function() {

            $.getJSON('http://api.reliefweb.int/v1/jobs?preset=latest&filter[field]=status&filter', function(reliefResult) {
for( i in reliefResult.data){
                document.write(reliefResult.data[i].fields.title + "<br/>");
  }

            });

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Answer 4

标题确实存在于结果中但不存在于顶层。您需要将创建的js对象下移到您想要的正确标题。

结果如下：

{
  “HREF”： “http://api.reliefweb.int/v1/jobs?preset=latest&filter[field]=status&filter”   “时间”：4，“链接”：{
        “自我”：{
           “HREF”： “http://api.reliefweb.int/v1/jobs?offset=0&limit=10&preset=latest”         }，         “下一步”：{
           “HREF”： “http://api.reliefweb.int/v1/jobs?offset=10&limit=10&preset=latest”         }，“totalCount”：2254，“count”：10，“data”：[
        {
           “ID”： “1696121”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1696121”            “田”：{
              “title”：“Mali - Mission d \ u209估价和诊断（SAME / EHA）（H / F） - Goundam”            }         }，         {
           “ID”： “1696101”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1696101”            “田”：{
              “标题”：“紧急响应官 - 保护”            }         }，         {
           “ID”： “1696026”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1696026”            “田”：{
              “标题”：“现场运营助理 - 国家合同”            }         }，         {
           “ID”： “1695986”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1695986”            “田”：{
              “标题”：“征求非国家行为人的提案基金”            }         }，         {
           “ID”： “1695841”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1695841”            “田”：{
              “头衔”：“突尼斯区域办事处”            }         }，         {
           “ID”： “1695831”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1695831”            “田”：{
              “标题”：“区域内容经理（欧亚和俄罗斯队 - 伦敦办事处）”            }         }，         {
           “ID”： “1695806”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1695806”            “田”：{
              “标题”：“OPT东道主或拉马拉地区办事处的活动”            }         }，         {
           “ID”： “1695786”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1695786”            “田”：{
              “标题”：“MENA地区的通讯协调员”            }         }，         {
           “ID”： “1695776”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1695776”            “田”：{
              “头衔”：“黎巴嫩项目官员（获得高等教育计划）”            }         }，         {
           “ID”： “1695741”，            “分数”：1，            “HREF”： “http://api.reliefweb.int/v1/jobs/1695741”            “田”：{
              “标题”：“技术顾问，社会和行为改变沟通”            }         }]}

例如

reliefResult.data [0] .fields.title

应该返回“

马里 - 使命d \ u00e9估价和诊断（SAME / EHA）（H / F） - Goundam

“

Answer 5

这是因为title嵌套在数据结构的更深处。要获得第一个标题，您需要document.write(reliefResult.data[0].fields.title)

为了列出所有标题，您需要映射它们：

reliefResult.data.map(function(e) {
    document.write(e.fields.title);
})

来自API的getJSON子集以显示在Web上

5 个答案: