无法让 api 数组从数组中输出 1 个第一个元素，它只在 jquery/javascript 中一次输出所有元素答案

【问题标题】：cant get api array to output 1 first element from array, it only outputs all elements at once in jquery/javascript无法让 api 数组从数组中输出 1 个第一个元素，它只在 jquery/javascript 中一次输出所有元素
【发布时间】：2019-06-25 02:53:10
【问题描述】：

我不能让数组只输出一个元素，当你在框中输入一个值时，它只会一次输出所有元素，这是使用https://market.mashape.com/community/urban-dictionary的api我

我尝试使用 jquery，但我无法让它只输出 1 个元素

$(document).ready(function() {

  $('#submit').click(function() {
    var wat = $('#wat').val();
    $.ajax({
      method: "GET",
      dataType: "json",
      url: "https://mashape-community-urban-dictionary.p.mashape.com/define?term=wat",
      // data: { fragment: false, json: true },        https://market.mashape.com/montanaflynn/gender-guesser
      data: {
        wat: wat
      },
      success: function(data) {
        console.log(data.list);
        $(data.list).each(function(key, value) {
          document.write(value.definition)
          console.log(key);
          console.log(value);
          console.log(value.definition)

          $("#response").append(value.definition);

        });
        // Place the 10 def into yuor response div
      },
      error: function(jqXHR, textStatus) {
        console.log(jqXHR);
        console.log(textStatus);
      },
      beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Mashape-Key', '7OByASqCq9msh5cE6uU43zz9HxOwp1kzb1ajsn26OZDiaXH06E');
        xhr.setRequestHeader('Accept', 'application/json');
        // xhr.setRequestHeader( 'Access-Control-Allow-Origin: https://montanaflynn-gender-guesser.p.mashape.com/?name=Aaron ' );
        // xhr.setRequestHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
        // xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');                    
      }

    });

  });

});

<h1>Facts</h1>
<input type="text" name="wat" id="wat">
<br><br>
<input type="submit" value="Get a Fact" id="submit">
<div id="response">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

它给了我数组中的所有元素而不是一个

【问题讨论】：

输出我的意思的任何元素，而不仅仅是第一个元素
您的要求并不完全清楚。 API 调用返回一个数组，如果您只想从中获取一个元素，您可以通过索引访问该数组。另外，删除document.write。这是一种不好的做法，它会弄乱你的输出。
数组中有10个元素，我想只打印1个，现在它一次打印出所有10个元素
删除$.each调用并改用$('#response').append(data.list.definition[0]);
尝试通过键数组[0]访问，看我的回答@Dannixx

标签： javascript jquery arrays api

【解决方案1】：

如果你只想要第一个元素需要通过键数组data.list[0]访问

$(document).ready(function() {

  $('#submit').click(function() {
    var wat = $('#wat').val();
    $.ajax({
      method: "GET",
      dataType: "json",
      url: "https://mashape-community-urban-dictionary.p.mashape.com/define?term=wat",
      // data: { fragment: false, json: true },        https://market.mashape.com/montanaflynn/gender-guesser
      data: {
        wat: wat
      },
      success: function(data) {
        console.log(data.list[0]);
       //$(data.list).each(function(key, value) {
          //document.write(value.definition)
         // console.log(key);
          //console.log(value);
         // console.log(value.definition)

          $("#response").append(data.list[0].definition);

        //});
        // Place the 10 def into yuor response div
      },
      error: function(jqXHR, textStatus) {
        console.log(jqXHR);
        console.log(textStatus);
      },
      beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Mashape-Key', '7OByASqCq9msh5cE6uU43zz9HxOwp1kzb1ajsn26OZDiaXH06E');
        xhr.setRequestHeader('Accept', 'application/json');
        // xhr.setRequestHeader( 'Access-Control-Allow-Origin: https://montanaflynn-gender-guesser.p.mashape.com/?name=Aaron ' );
        // xhr.setRequestHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
        // xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');                    
      }

    });

  });

});

<h1>Facts</h1>
<input type="text" name="wat" id="wat">
<br><br>
<input type="submit" value="Get a Fact" id="submit">
<div id="response">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：