Javascript 获取要显示的API数据表单URL

我正在尝试构建一个基本工具，通过zipcode显示某人的国会代表

我尝试使用的API是通过以下途径免费提供的：

通过zipcode获取信息的链接为：

它也可以格式化为json，如下所示：

我已经阅读了大量关于如何显示这些数据的文章，但我遇到的麻烦是如何显示这些数据

如何获取要显示在页面上的数据

我的第一次尝试基于w3schools示例。单击按钮时，应在空div中显示结果，但在替换URL时，不会显示结果。当您直接访问URL时，数据就在那里

我的JavaScript知识相当有限，所以我会逐行讨论，也许我只是误解了一些东西

$（document）.ready（function（）{

）-为某些jquery准备文档

$（“按钮”）。单击（函数（）{

-在

$.getJSON（“https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json，函数（结果）{

-我希望这就是从API URL获取数据的原因

$。每个（结果，函数（i，字段）{

-我不确定这是做什么的，但我想这会显示“结果”的字段

$（“div”）.append（field+”）；

-这将显示空

完整的index.php代码

找到你的代理人
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.getJSON（“https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json“，函数（结果）{
$.each（结果、函数（i、字段）{
$（“div”）.append（字段+”）；
});
});
});
});
获取JSON数据

你很接近了

首先让我解释一下如何解释函数调用

$（document）

是获取活动HTMLDocument对象的jQuery选择器

然后，我们在该对象上调用方法

ready

，该方法等待文档完成加载。它是一个事件侦听器，等待文档的“onReady”事件。一旦检测到该事件，我们就知道文档及其所有组件已完全加载

当时，我们在

ready

方法调用中执行匿名函数。我们发现：

$("button").click( function(){...} )

您是对的。

$（“按钮”）

代码获取加载到具有“按钮”的文档中的所有对象标记名称。在这种情况下，只有一个按钮。然后调用方法

click

，该方法在按钮对象上设置事件侦听器，并且每次单击关联的按钮时都会调用事件侦听器

被调用的函数包含以下代码：

$.getJSON("https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json", function(results){
    ...
});

var exampleData = ["item1","item2","item3"];
$.each( exampleData, function( i, itemName ){ ... } );

由于它的位置，每次单击按钮时都会运行此代码。

$

符号是一个变量名，链接到加载的jQuery库。在该库中，我们调用

getJSON

方法，该方法将从提供的URL（您的第一个参数）获取JSON，然后它将异步返回给您提供的任何函数。在本例中，您提供了一个匿名函数：

function( results ){
    $.each(results, function(i, field){
       $("div").append(field + " ");
    });
}

结果将是您的JSON对象。正如您所期望的

到目前为止，您对上述内容的理解非常接近，您的问题实际上是从理解

$开始的。each（）

请记住，

$

是jQuery库。

each（）

是一个函数，就像for…each循环一样

在本例中，调用

$。each（results，function（i，field）{…}）；

执行以下操作。它迭代results对象中的每个项，然后为每个项调用函数一次。函数中的第一个参数（

i

）是结果数组中的索引，第二个参数（

field

）是实际项目本身

例如，假设我有以下代码：

$.getJSON("https://whoismyrepresentative.com/getall_mems.php?zip=31023&output=json", function(results){
    ...
});

var exampleData = ["item1","item2","item3"];
$.each( exampleData, function( i, itemName ){ ... } );

在对

函数（i，itemName）{…}

块的每次调用中，我将看到以下内容：

第一次调用时，

i=0

和

itemName=“item1”

在第二次调用时，

i=1

和

itemName=“item2”

在第三次调用时，

i=2

和

itemName=“item3”

不会有第四次调用，因为循环已完成

因此，

$。每个（数组，function（）{}）

将函数应用于数组的每个元素

这意味着您感兴趣的JSON数据将位于函数调用的

字段中

变量中，因此当函数执行时：

$("div").append(field+" ");

该代码执行以下操作：

将值“div”传递给jQuery定位器，该定位器获取由“div”标记标识的项目的所有实例

对DIV元素调用append方法

将

字段

值和空格添加到元素内容的末尾

为了了解发生了什么，我建议使用更少的匿名函数，并使用

console.log（…）

和

调试器

语句，以帮助在代码运行时检查代码。当您可以在控制台中看到每个

字段

变量中包含的内容时，您可以更好地理解呈现给您的数据，然后可以更清楚地使用格式

为了帮助您完成旅程，我通过删除匿名函数对代码进行了重构，使其更加清晰：

/**
*出于本例的目的，我将重写jQuery.each方法。此测试环境不允许外部调用
*获取其他数据。这称为双重测试…忽略它即可。
*/
$.getJSON=function（url，callbackFunction）{
var jsonFetchedOn2017_12_21={
“再