从json文件获取数据 [英] getting data from json file
问题描述
我在目录中有一个名为"json.json"的json文件.我想从该文件中获取项目并将其显示在我现在已经硬编码的UL中.当我尝试获取该文件时，它不起作用.谁能帮助我退休，并将json文件中的这些项目添加到UL中.预先感谢
I have a json file named "json.json" in the directory. I want to get items from that file and display them in the UL which i had hard-coded now. When i try to get that file it is not working. Can anyone help me retire it and add those items in the json file to the UL. Thanks in advance
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/jquery_ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<table id="myTable" class= "table table-bordered">
<tr>
<th class="col-md-6 text-center success">
List 1
</th>
<th class="col-md-6 text-center danger">
List 2
</th>
</tr>
<tr>
<td class="col-md-6">
<ul id="firstlist">
<li>Apple <img id="Apple" src = "next.jpg" class = "list1"></li>
<li>Orange <img id="Orange" src = "next.jpg" class = "list1"></li>
<li>Avacado <img id="Avacado"src = "next.jpg" class = "list1"></li>
<li>Banana <img id="Banana" src = "next.jpg" class = "list1"></li>
<li>Mango <img id="Mango" src = "next.jpg" class = "list1"></li>
<ul>
</td>
<td class="col-md-6">
<ul class = "seclist" id = "seclist"></ul>
</td>
</tr>
</table>
<script>
$(function(){
$.getJSON('json.json',function(data){
console.log('success');
}).error(function(){
console.log('error');
});
});
</script>
</body>
</html>
我这样创建了json文件:
I created the json file like this:
{"Fruits":[
{"textToBeDisplayed":"Apple"},
{"textToBeDisplayed":"Orange"},
{"textToBeDisplayed":"Avacado"},
{"textToBeDisplayed":"Banana"},
{"textToBeDisplayed":"Mango"},
]}
推荐答案
您需要将json数组分配给变量. LittleDragon的建议是正确的，但是您需要像这样使用它:
You need to assign the json array to a variable. LittleDragon's suggestion is correct, but you need to use it like this:
var fruits = {"Fruits":[
{"textToBeDisplayed":"Apple"},
{"textToBeDisplayed":"Orange"},
{"textToBeDisplayed":"Avacado"},
{"textToBeDisplayed":"Banana"},
{"textToBeDisplayed":"Mango"},
]};
，然后只需在页面上添加<script src="json.json"></script>，就可以从javascript中访问fruits json数组.
and then just add <script src="json.json"></script> on your page, then you can access the fruits json array from javascript.
这是为您准备的小提琴: http://jsfiddle.net/ar37G/
Here's a fiddle for you: http://jsfiddle.net/ar37G/
这篇关于从json文件获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
