Javascript 从API获取JSON子集以在web上显示_Javascript_Jquery_Ajax

Javascript 从API获取JSON子集以在web上显示

javascript jquery ajax

Javascript 从API获取JSON子集以在web上显示,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正试图从API中获取一些数据，并将这些数据转换成我自己的网站 API get请求：我试图在自己的网站上显示该api中的所有“标题”。但不知怎么的，它不起作用。我确信我已经安装了jquery。使用代码片段：但是当我加载html文件时，什么也没有显示 <!DOCTYPE HTML> <html> <head> <title>Relief Web</title> <script src="//ajax.

我正试图从API中获取一些数据，并将这些数据转换成我自己的网站

API get请求：

我试图在自己的网站上显示该api中的所有“标题”。但不知怎么的，它不起作用。我确信我已经安装了jquery。使用代码片段：

但是当我加载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>


救济网
$（文档）.ready（函数（）{
$.getJSON（'http://api.reliefweb.int/v1/jobs?preset=latest&filter[字段]=状态和过滤器'，功能（reliefResult）{
文件编写（reliefResult.title）；
});
});

您的代码当前将显示

未定义

，因为

标题

是

数据

数组中对象的属性。您需要循环该数组并创建所需的元素。试试这个：

$.getJSON（'https://api.reliefweb.int/v1/jobs?preset=latest&filter[字段]=状态和过滤器'，功能（reliefResult）{
$.each（reliefResult.data，函数（\ux，数据）{
$（'div'）.append（''+data.fields.title+''）；
})
});
您的代码当前将显示未定义
，因为标题
是数据
数组中对象的属性。您需要循环该数组并创建所需的元素。试试这个：

$.getJSON（'https://api.reliefweb.int/v1/jobs?preset=latest&filter[字段]=状态和过滤器'，功能（reliefResult）{
$.each（reliefResult.data，函数（\ux，数据）{
$（'div'）.append（''+data.fields.title+''）；
})
});
您必须使用从API响应中获得的JSON对象的属性和子属性

$（文档）.ready（函数（）{
$.getJSON（'http://api.reliefweb.int/v1/jobs?preset=latest&filter[字段]=状态和过滤器'，功能（reliefResult）{
对于（i在reliefResult.数据中）{
document.write（reliefResult.data[i].fields.title+“
”）；
}
});
});
您必须使用从API响应中获得的JSON对象的属性和子属性

$（文档）.ready（函数（）{
$.getJSON（'http://api.reliefweb.int/v1/jobs?preset=latest&filter[字段]=状态和过滤器'，功能（reliefResult）{
对于（i在reliefResult.数据中）{
document.write（reliefResult.data[i].fields.title+“
”）；
}
});
});
这是因为标题
嵌套在数据结构中更深。为了获得第一个标题，您需要document.write（reliefResult.data[0].fields.title）

要列出所有标题，您需要映射它们：
reliefResult.data.map(function(e) {
    document.write(e.fields.title);
})

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

要列出所有标题，您需要映射它们：
reliefResult.data.map(function(e) {
    document.write(e.fields.title);
})


$（文档）.ready（函数（）{
$.getJSON（'http://api.reliefweb.int/v1/jobs?preset=latest&filter[字段]=状态和过滤器'，功能（reliefResult）{
reliefResult.data.forEach（函数（记录）{
$（'body'）.append（“”+record.fields.title+“”）；
});
});
});

$（文档）.ready（函数（）{
$.getJSON（'http://api.reliefweb.int/v1/jobs?preset=latest&filter[字段]=状态和过滤器'，功能（reliefResult）{
reliefResult.data.forEach（函数（记录）{
$（'body'）.append（“”+record.fields.title+“”）；
});
});
});
标题确实存在于结果中，但不在顶层。您需要将创建的js对象转到您想要的适当标题
结果如下：
{

“href”：”http://api.reliefweb.int/v1/jobs?preset=latest&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"
}}，“总计计数”：2254，“计数”：10，“数据”：[

{

“id”：“1696121”，
“分数”：1，
“href”：”http://api.reliefweb.int/v1/jobs/1696121",
“字段”：{

“标题”：“马里-任务d\u2019\U00E9评估和诊断（相同/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",
“字段”：{

“标题”：“2013年非国家行为者招标基金”
}
},
{

“id”：“1695841”，
“分数”：1，
“href”：”http://api.reliefweb.int/v1/jobs/1695841",
“字段”：{

“标题”：“地区活动家\u2013突尼斯地区办事处”
}
},
{

“id”：“1695831”，
“分数”：1，
“href”：”http://api.reliefweb.int/v1/jobs/1695831",
“字段”：{

“职务”：“区域内容经理（欧亚和俄罗斯团队-伦敦办事处）”
}
},
{

“id”：“1695806”，
“分数”：1，
“href”：”http://api.reliefweb.int/v1/jobs/1695806",
“字段”：{

“标题”：“OPT\u2013东耶路撒冷或拉马拉地区办事处活动家”