我如何显示一个外部JS函数(返回数组)到一个html列表

How do I show an external JS function (returns array) into a html list

本文关键字：一个 数组 返回 html 列表 函数 JS 何显示 外部 显示      更新时间：2023-09-26

我正在开发一个移动应用程序。我需要显示一个数组在列表上我的html。我在外部.js文件中有一个函数，它返回一个具有检索到的JSON数据的数组。

这是我在javascript中的函数:

function getnames() {
  var url = api + "/name";
  $.getJSON(url).done(function (answer) {
    if (!answer.length) {
      console.warn("Empty list");
    }
    api.name = response;
    for (i = 0; i < response.length; i++) {
      $('#names').html(api.name[i].name);
    }
  }).fail(function (data, status, error) {
    console.error("Something went wrong");
  });
}

这是我想要显示的html列表:

<div>
  <div class="widget-container">
    <div class="list-group">
      <a>
        <h4 id="names">
          <script type="text/javascript">
            window.onload = function () {
              getnames();
            };
          </script>
        </h4>
      </a>
      this is repeated 4 times.I have 4 headings meaning i need for 4 names            which is as much the array returns
    </div>
  </div>
</div>

我想显示它们的列表是面板中的菜单。由于某些原因，我的代码只显示了姓氏。

$('#names').html(api.name[i].name); // You are overwriting with each loop

试题:

$('#names').append(api.name[i].name);

如果我理解正确，您想为每个数组元素生成一个h4标记。

你的代码中的一些问题:

  • 把你的script标签在你想注入数据的地方是没有用的。只需将它放在结束的</body>标签之前，或者放在<head>标签中;
  • 不要使用window.load。在某些特定的情况下，它可能是有用的，但不是在你的情况下。相反，使用DOMContentLoaded事件，或者在使用jQuery时使用等效的.ready()方法;
  • 您将JSON响应参数命名为answer，但随后开始引用response:显然您应该坚持相同的变量名称;
  • 你给同一个元素#names分配了多次HTML，这样你就覆盖了前一个值，只留下最后一个值;
  • 对于纯文本的参数使用html方法。不建议这样做，因为包含<或&字符的文本可能会出现问题，因为它们在HTML中具有特殊含义。你应该使用.text();
  • 你以奇怪的方式使用api变量。首先，它似乎是一个字符串(在url = api + "/name")，然后你分配给它的name属性。虽然这可以工作，但它使您的代码模糊不清。如果它确实是一个对象，那么第一条语句将等于url = api.toString() + "/name";
  • 代码从未添加另一个h4元素，这似乎是你想要的。为了实现这一点，您可以动态生成必要的h4元素。
下面是相应的代码，它使用了一个假的JSON提供程序: 

var api = 'https://jsonplaceholder.typicode.com';
function getnames() {
  var url = api + "/posts"; // change to "/name"
  $.getJSON(url).done(function (response) {
    if (!response.length) {
      console.warn("Empty list");
    }
    $.map(response, function(item) {
      $('.list-group').append($('<h4>').text(item.title)); // change to item.name
    });
  }).fail(function (data, status, error) {
    console.error("Something went wrong");
  });
}
$(function() {
    getnames();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
  <div class="widget-container">
    <div class="list-group">
    </div>
  </div>
</div>

处理HTML内容时要避免重复更新:每次更新DOM时，浏览器都会检查它是否需要更新显示，并且可能会启动大量的重新计算、重新绘制和其他昂贵的过程。如果可以的话，最好是构建要更新的内容，然后一步将其插入DOM，如下所示:

function getnames() {
  var url = api + "/name";
  $.getJSON(url).done(function (answer) {
    if (!answer.length) {
      console.warn("Empty list");
    }
    // jQuery map gives you a new array of the returned values: 
    names = $.map(answer, function(e){
      return e.name;
    });
    // Join turns the array into a string, separated with ', '
    $('#names').html(names.join(', '));
  }).fail(function (data, status, error) {
    console.error("Something went wrong");
  });
}

这段代码从getJSON调用中获取answer，并将其转换为仅包含名称属性的数组。Join将其转换为逗号分隔的字符串，并将其传递给#names上的html方法。

我希望这足够清楚-让我知道它是否有意义!

相关文章：