时间戳

首页 > 解决方案 > 如何在 JS 中正确地对特定对象进行子集化

javascript - 如何在 JS 中正确地对特定对象进行子集化

问题描述

我目前正在做一些练习，我想在这个 api 上打印每部电影的标题：

https://jsonmock.hackerrank.com/api/movies?Year=1998

基本上，我希望为第一页（或者最好是特定页面）打印每个标题。

这是我的代码：

<script>
function printTItles(year) {
  var res;
  
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      res = JSON.parse(this.responseText);
      
      for(var i=0;i<res.per_page;i++){
        document.getElementById("demo").innerHTML = res.data.i.Title;
      }
    };
  }
  xmlhttp.open("GET", "https://jsonmock.hackerrank.com/api/movies?Year=<year>", true);
  xmlhttp.send();
}
</script>

我知道问题出在哪里，res.data.i.title但我不确定如何解决。

标签： javascriptapiobject

解决方案

您正在尝试访问i循环中索引处的元素，就像访问对象的属性一样。要获取数组中某个位置的元素i，res.data您需要方括号访问[ ]

此外，您不会将year请求中的year参数替换为传递给函数的参数。你可能想检查一下。

这里我以年份2018为例。

function printTItles(year) {
  var res;
  
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      res = JSON.parse(this.responseText);
      
      for(var i=0;i<res.per_page;i++){
         document.getElementById("demo").innerHTML = res.data[i].Title;
      }
    };
  }
  xmlhttp.open("GET", "https://jsonmock.hackerrank.com/api/movies?Year=2018", true);
  xmlhttp.send();
}

printTItles();
<div id="demo"></div>

您可以添加更多改进。例如，在每次迭代中，您都在替换#demo元素的内容。这会导致仅显示最后一个标题。相反，您可以将数据附加到 div 的现有 html 中。或者，就像我在这种情况下所做的那样，在将其设置为新innerHTML值之前构建您的字符串。

function printTItles(year) {
  var res;
  
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      res = JSON.parse(this.responseText);
      
      var output = "";
      for(var i=0;i<res.per_page;i++){
        if(res.data[i]) {
          output += res.data[i].Title + '<br />';
        }
      }
      
       document.getElementById("demo").innerHTML = output;
    };
  }
  xmlhttp.open("GET", "https://jsonmock.hackerrank.com/api/movies?Year=2018", true);
  xmlhttp.send();
}

printTItles();
<div id="demo"></div>

我还添加了一个条件来检查res.data[i].

推荐阅读