通过 Javascript 将 JSON 文件中的元素添加到 HTML答案

【问题标题】：Adding elements from a JSON file into the HTML through Javascript通过 Javascript 将 JSON 文件中的元素添加到 HTML
【发布时间】：2014-10-30 20:46:23
【问题描述】：

我正在构建一个网页，您可以在其中显示从 JSON 数据库中获取的随机元素。例如，我们可以有一个“我应该煮什么”按钮，每次点击它都会给你一个随机的菜。

到目前为止，我已经设法创建了一个按钮，当单击该按钮时，会从我的 JSON 文件中的几个字段中写出一 (1) 个字段。

我想向 JSON 添加更多元素。此外，我正在尝试完成以下两种选择之一：

从 JSON 文件中的随机元素中获取字段。（这优于第二种选择）

或

按特定顺序从 JSON 文件中获取元素。因此，您可以在第一次单击按钮时从第一个元素中获取一个字段，然后在您第二次单击该按钮时从第二个元素中获取一个字段，依此类推。

如果我添加另一个元素，现在没有任何效果。这就是我的代码现在的样子。

JSON：

{
    "visible": "1",
    "date": "2011-01-16 19:48:27",
    "submitterid": "2541",
    "rating": "3",
    "dubious": "1",
    "imdbid": "0268126",
    "id": "1919",
    "title": "Adaptation",
    "year": "2002"
}

HTML：

<html>
<head>
<title>hi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js.js"></script>
<script>
var bechdelApi = "js.js";
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON(bechdelApi, function(data){
      $.each(data, function(i, field){
        if (i == "title") {
          $("div").append(field + " "); 
        }
      });
    });
  });
});
</script>
</head>
<body>

<button>give me a movie!</button>
<div></div>

</body>

【问题讨论】：

标签： javascript jquery html json api

【解决方案1】：

如果你使用 TaffyDB，你可以这样做：

<!DOCTYPE html>

<html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.2/taffy-min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
      <button class="movie-button">give me a movie!</button>
      <div class="movies-container"></div>
  </body>       
</html>

<script>
var movies = TAFFY();
$.getJSON("yourAPICall", function( data ) {
    movies.insert(data);  
});

$(".movie-button").click(function(){
  //updating each element in the movies db with the 'order' field, which is initialized with a random value
  movies().update(function(){
      this.order = Math.floor(Math.random() * 100);
      return this;
  });

  //ordering the movies collection by the field 'order' and fetching the first movie on the new ordering
  var movie = movies().order("order").first();

  //appending movie title to container div
  $(".movies-container").html($("<div class='movie-container'></div>").append(movie.title));
});
</script>

示例：http://jsfiddle.net/87u27swk/

【讨论】：

这个question 有一个有用的答案，可以随机进行整个排序并添加更少的代码行。
谢谢！！虽然不能真正让它在 jsfiddle 之外工作.. 可能是因为我不使用 TAFFY。我必须安装它还是可以在我的文档中链接到它？如果我在我的计算机上本地安装一个程序来让网站为其他人工作，那会有什么不同...对不起愚蠢的q！
因为我是初学者，所以我根本没有真正掌握框架，我试图在没有它们的情况下度过难关，因为我有点害怕它们嘿嘿。我自己也没有创建我的数据库，我在我正在使用的 API 中拥有它（bechdeltest.com/api/v1/doc）。不知道是否可以使用该特定 API 中未使用的框架......但我不知道。
@HyperCharles 我已经用从 API 调用返回的 json 填充数据库的代码更新了答案。我还修复了被引用脚本（TaffyDB 和 jQuery）的 url 上缺少的“http”。当您从本地计算机尝试它时，这打破了参考。它现在应该可以工作了。只需将“yourAPICall”替换为您的 API 网址即可。
哈哈对不起，我是 stackoverflow 的新手，没有得到“接受答案”的东西。现在已经做到了！我设法自己解决了这个问题，重写了很多代码。我这样做了，它会发出一个订单，然后从该订单中随机化一个数字，而不是每次都随机化订单并取第一个。然后我做了一个 if else 语句，我说如果随机电影的评级为 == 3，则显示，否则，随机化一个新数字并显示。没有你的帮助是不可能的，所以非常感谢你！