对IP列表使用freegeoip

Question

请给我一个简单的提示，在哪里挖掘！

我有多个IP，需要显示每个IP旁边的位置。

我在数组中有一个IPS列表

var table = document.createElement('table');
table.innerHTML = forext;
var ips = [].slice.call(table.querySelectorAll('a[href*="?ip="]')).map(anchor => anchor.textContent).join("\n");

8.8.8.8
8.8.4.4 
...

我可以通过输入框得到它们的位置。

$('.send').on('click', function(){

  $.getJSON('https://ipapi.co/'+$('.ip').val()+'/json', function(data){
      $('.city').text(data.city);
      $('.country').text(data.country);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="ip" value="8.8.8.8">
<button class="send">Go</button>
<br><br>
<span class="city"></span>, 
<span class="country"></span>

但我需要的是打印I和旁边的位置：

所以，我有一个：

8.8.8.8
8.8.8.8

但我需要这个

8.8.8.8 -Mountain View, US
8.8.8.8 -Mountain View, US
...

如何通过http://freegeoip.net/json/处理整个数组？谢谢。

更新1:尝试使用: ipsi

var ipText='Lookup...';
var table = document.createElement('table');
table.innerHTML = forext;
var ips = [].slice.call(table.querySelectorAll('a[href*="?ip="]')).map(anchor => anchor.textContent).join("\n");

var ipLocations = [];

for(i=0;i<ips.length;i++){

 $.getJSON('https:/freegeoip.net/json/' + ips[i], function(data) {
    // could also use data.country_name, or any other property in the returned JSON
    var outputString = data.ips[i] + ' - ' + data.city + ', ' + data.country_code; 
    ipLocations.push(outputString);

  });

}

ipText = ipLocations.join('\n');
message.innerText = ipText;

Answer 1

首先，你真的希望你的IP是一个字符串数组，而不是一个字符串。因此，您应该更改var ips = ...的声明，并从末尾删除.join("\n") --这会将您方便的IP字符串列表转换为一个字符串，其中IP由换行符分隔，这是您不想要的。

然后，当您有一个类似于ips = ['8.8.8.8', '8.8.4.4', ... ];的表单的IP地址数组时

...then可以以以下方式获得您描述的输出：

var ipLocations = [];
for (var ip of ips) {
  $.getJSON('https://freegeoip.net/json/' + ip, function(data) {
    // could also use data.country_name, or any other property in the returned JSON
    var outputString = data.ip + ' - ' + data.city + ', ' + data.country_code; 
    ipLocations.push(outputString);
  });
}

现在，您有了一个具有IP地址+位置的字符串数组，正如您所描述的。如果现在要将其转换为单个字符串，则可以执行ipText = ipLocations.join('\n');以获得以换行符分隔的输出行。

但是，如果要将此文本输出到HTML文档中，您可能希望在<br>上而不是在\n上加入，在许多上下文中，会忽略\n这样的空白字符，最后会在一行中得到所有输出。

更新：

在我最初的答案中有一些非常愚蠢的错误，其中最主要的是我混合了Python和JavaScript语法(facepalm)。修复了它们之后，这个代码就能工作了。尽管如此，还有一些需要提及的警告，以及更新1代码中的一些错误，您应该真正理解这些错误。

首先，代码中的问题：

• 您从未从定义.join("\n")的第4行中删除过ips，因此它仍然只是一个字符串，而不是一个字符串数组。这意味着for-循环实际上是遍历ips字符串中的每个单独字符，而不是完整的IP地址。
• 您尝试在循环中访问data.ips[i]。data变量包含对AJAX请求的JSON响应，但通过jQuery自动从JSON字符串转换为实际的JavaScript对象。它只具有响应中包含的属性。在这种情况下，响应总是有一个ip属性，因此您可以访问data.ip。但是，ips是您创建的一个变量--data.ips不存在，因此您无法访问它的索引。
  • 另外，如果使用for...of语法，您还可以使用一个名为ip的循环变量。但是，您需要理解ip和data.ip并不是相同的变量，即使它们在这种情况下总是具有相同的值。

​

• 这个网址以"https:/“开头，而不是"https://"”。实际上，这是我的错，我在我最初的答案>_>中输入了它；

这样，您就在评论中提到了一个非常重要的问题--函数是异步，因此(忽略其他问题)在更新1中编写的代码可能不会达到预期的效果。调用getJSON之后的代码将继续运行，即使您的AJAX请求还没有响应，所以如果您立即访问ipLocs数组，它可能只有一些输出字符串，甚至是空的。

我不会向您解释如何等待非阻塞代码，因为这是一个完全不同的问题。我还担心，考虑到您对JavaScript的熟悉程度，这只会使事情变得更加混乱。但是，如果您只想要一个快速的解决方案，给出您所期望的结果，即使这不是最佳实践，那么您可以使用ajax函数而不是getJSON。这允许您显式地告诉jQuery同步发送AJAX请求，这意味着它将在继续运行代码之前等待响应。但是，您需要知道同步请求可能暂时锁定浏览器，在请求完成之前阻止任何其他操作。这个版本应该是这样的：

var ipLocations = [];
for (var ip of ips) {
  $.ajax({
    url: 'https://freegeoip.net/json/' + ip,
    async: false,
    success: function(data) {
      var outputString = data.ip + ' - ' + data.city + ', ' + data.country_code; 
      ipLocations.push(outputString);
    }
  });
}