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

我正在构建一个网页，您将能够显示从JSON数据库中提取的随机元素。例如，我们可以有一个“我应该做什么”按钮，每次点击它时都会随机放置一个盘子。通过Javascript将JSON文件中的元素添加到HTML中

到目前为止，我已经设法创建一个按钮，当点击它时，会从我的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>

来源

2014-10-30 HyperCharles

如果使用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/

来源

2014-10-30 23:13:18 carlosHT

这个[问题]（http://stackoverflow.com/ques tions/8908192/taffydb-rendering-data-to-html）对于随机完成整个排序并添加更少的代码行有一个有用的答案。 – carlosHT 2014-10-30 23:24:14

谢谢！不能真的让它在jsfiddle之外工作，但是.. prob是因为我不使用TAFFY。我必须安装它还是可以在我的文档中链接到它？如果我在我的计算机上安装本地程序以使网站适用于其他用户，那么它们会有什么不同？对于愚蠢的q，感到抱歉！ – HyperCharles 2014-10-30 23:45:16

因为我是初学者，我还没有真正掌握框架，我试图让他们没有他们BC我有点害怕他们嘿。我也没有自己创建我的数据库，我在我正在使用的API（bechdeltest.com/api/v1/doc）中使用它。不知道是否可以使用未在特定API中使用的框架......但我不知道。 – HyperCharles 2014-10-30 23:59:32

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

回答

相关问题