从获取的json文件中访问特定数据

时间：2014-11-04 16:33:43

标签： jquery json

您好我是前端开发的新手，我已经获取了json数据并将其添加到html中作为列表<li>项目，但我的问题是当我点击列表格式json我想要有关的那些特定信息点击特定链接登录控制台窗口。

var data1={"users":[
   
		{
			"depTime":"21:30",
			"arrival":"23:30",
			"duration":"1h 45m",
			"price":"2,400",
			"planeName":"auditore",
			"stops":"non-stop",
			"image":"indiago"
		},
		{
			"depTime":"21:30",
			"arrival":"23:30",
			"duration":"1h 45m",
			"price":"2,400",
			"planeName":"auditore",
			"stops":"non-stop",
			"image":"indiago"
		}
]
         };

var output="<ul>";
    for(var i in data1.users)
    {
        output +="<li>"+
            "<a href='#'>"+"<table>"+
	        		"<tr>"+
			            "<td>"+"<input type='radio' name='radio'>"+"</td>"+
			            "<td>"+"<img src=''>"+"</td>"+
			            "<td>"+data1.users[i].depTime+"</td>"+
			            "<td>"+data1.users[i].arrival+"</td>"+
			            "<td>"+data1.users[i].duration+"</td>"+
			            "<td>"+"</td>"+
			            "<td>"+data1.users[i].price+"</td>"+
	        		"</tr>"+
	                
	        		"<tr>"+
	        			"<td>"+"</td>"+
	        			"<td>"+data1.users[i].planeName+"</td>"+
						"<td>"+"</td>"+
			            "<td>"+"</td>"+
			           	"<td>"+data1.users[i].stops+"</td>"+
			        "</tr>"+
	    		"</table>"+"</a>"   +          
           "</li>";
    }
    output += "</ul>";
    
    document.getElementById("placeholder").innerHTML=output;

    var add="<h1>";
    $("#placeholder a").click(function(){
    	event.preventDefault();
    	var value= //this is where i run into trouble 
                   //i want the price and depTime value of that particular <li> element which i clicked on
    	console.log(value);
	});
    add+="</h1>";
document.getElementById("add").innerHTML=add;
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="placeholder"></div>
<div id="add"></div>
</body>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</html>

7 个答案:

答案 0 :(得分：0)

有几种方法可以做到这一点。一种是向data-标记添加tr属性，然后您可以使用该属性返回JSON中的数据。

更新此行以包含索引：

 "<a href='#'>"+"<table data-index='" + i + "'>"+

然后在点击功能

var index = $(this).find("table").data("index");
var valuePrice = data1.users[index].price;

答案 1 :(得分：0)

您应该将i变量添加到您的li <li data-user-id='1'></li>。我修改了你的例子，告诉你如何。

＆＃13;
＆＃13; 
var data1={"users":[
   
		{
			"depTime":"21:30",
			"arrival":"23:30",
			"duration":"1h 45m",
			"price":"2,400",
			"planeName":"auditore",
			"stops":"non-stop",
			"image":"indiago"
		},
		{
			"depTime":"21:30",
			"arrival":"23:30",
			"duration":"1h 45m",
			"price":"2,400",
			"planeName":"auditore",
			"stops":"non-stop",
			"image":"indiago"
		}
]
         };

var output="<ul>";
    for(var i in data1.users)
    {
        // Add i to the li as an attribute.
        output +="<li data-user-id='"+i+"'>"+
            "<a href='#'>"+"<table>"+
	        		"<tr>"+
			            "<td>"+"<input type='radio' name='radio'>"+"</td>"+
			            "<td>"+"<img src=''>"+"</td>"+
			            "<td>"+data1.users[i].depTime+"</td>"+
			            "<td>"+data1.users[i].arrival+"</td>"+
			            "<td>"+data1.users[i].duration+"</td>"+
			            "<td>"+"</td>"+
			            "<td>"+data1.users[i].price+"</td>"+
	        		"</tr>"+
	                
	        		"<tr>"+
	        			"<td>"+"</td>"+
	        			"<td>"+data1.users[i].planeName+"</td>"+
						"<td>"+"</td>"+
			            "<td>"+"</td>"+
			           	"<td>"+data1.users[i].stops+"</td>"+
			        "</tr>"+
	    		"</table>"+"</a>"   +          
           "</li>";
    }
    output += "</ul>";
    
    document.getElementById("placeholder").innerHTML=output;

    var add="<h1>";
    $("#placeholder a").click(function(){
    	event.preventDefault();
    	var value= data.user[$(this).parent('li').data('user-id')]; // get the direct parent of a which is the li that contains the data-user-id.
    	console.log(value);
	});
    add+="</h1>";
document.getElementById("add").innerHTML=add;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="placeholder"></div>
<div id="add"></div>
</body>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

首先，获取所有子td元素; 

$("#placeholder a").click(function(event) {
    event.preventDefault();

    var tableCells = $(this).find("td");

    console.log(tableCells.get(2).innerHTML, tableCells.get(6).innerHTML);
});

不要忘记将event参数传递给您的点击处理程序，否则您应该会在event.preventDefault()上收到错误。

答案 3 :(得分：0)

我在链接标记中添加了几个数据属性，您可以在单击处理程序中访问它。 

var value = $(this).data('deptime') + " - " + $(this).data('price');

如果必须从对象访问更多内容，请保存索引并使用它来获取处理程序中的属性。

请查看以下代码段并告诉我们。

＆＃13;
＆＃13; 
var data1 = {
  "users": [

    {
      "depTime": "21:30",
      "arrival": "23:30",
      "duration": "1h 45m",
      "price": "2,400",
      "planeName": "auditore",
      "stops": "non-stop",
      "image": "indiago"
    }, {
      "depTime": "21:30",
      "arrival": "23:30",
      "duration": "1h 45m",
      "price": "2,400",
      "planeName": "auditore",
      "stops": "non-stop",
      "image": "indiago"
    }
  ]
};

var output = "<ul>";
for (var i in data1.users) {
  output += "<li>" +
    "<a href='#' data-deptime='" + data1.users[i].depTime + "' data-price='" + data1.users[i].price + "' >" + "<table>" +
    "<tr>" +
    "<td>" + "<input type='radio' name='radio'>" + "</td>" +
    "<td>" + "<img src=''>" + "</td>" +
    "<td>" + data1.users[i].depTime + "</td>" +
    "<td>" + data1.users[i].arrival + "</td>" +
    "<td>" + data1.users[i].duration + "</td>" +
    "<td>" + "</td>" +
    "<td>" + data1.users[i].price + "</td>" +
    "</tr>" +

    "<tr>" +
    "<td>" + "</td>" +
    "<td>" + data1.users[i].planeName + "</td>" +
    "<td>" + "</td>" +
    "<td>" + "</td>" +
    "<td>" + data1.users[i].stops + "</td>" +
    "</tr>" +
    "</table>" + "</a>" +
    "</li>";
}
output += "</ul>";

document.getElementById("placeholder").innerHTML = output;

var add = "<h1>";
$("#placeholder a").click(function(event) {
  event.preventDefault();
  var value = $(this).data('deptime') + " - " + $(this).data('price');
    console.log(value);
});
add += "</h1>";
document.getElementById("add").innerHTML = add;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div id="placeholder"></div>
<div id="add"></div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

另一种实现你想要实现的目的的方法是在你的td类中添加class属性来表示它们是什么样的<td class="depTime">deptime_data_here</td>。

然后在您的点击事件中，您可以像这样获取dom中所需的每个数据：

 $("#placeholder a").click(function(){
    event.preventDefault();
    var $this = $(this);
    var value = $this.find('.depTime').innerHtml();
    console.log(value);
});

基本上，你需要的是在dom中添加信息，以便以后能够轻松解析它。

您甚至可以在input的td中添加<td><input class="depTime" value="deptime_data_here"/></td>，然后直接使用val函数代替innerHtml函数。

答案 5 :(得分：0)

您可以简单地传递值，如下所示。这是demo

编写新函数并将值传递给您需要的

    function selectedRow(depTime, price){
     console.log(depTime);
     console.log(price);
    }

在锚点onclick

中添加上述功能 
var output="<ul>";
    for(var i in data1.users)
    {
        output +="<li>"+
            "<a href='javascript:;' onclick='selectedRow(\""+data1.users[i].depTime+"\", \""+data1.users[i].price+"\")'>"+"<table>"+
                    "<tr>"+
                        "<td>"+"<input type='radio' name='radio'>"+"</td>"+
                        "<td>"+"<img src=''>"+"</td>"+
                        "<td>"+data1.users[i].depTime+"</td>"+
                        "<td>"+data1.users[i].arrival+"</td>"+
                        "<td>"+data1.users[i].duration+"</td>"+
                        "<td>"+"</td>"+
                        "<td>"+data1.users[i].price+"</td>"+
                    "</tr>"+

                    "<tr>"+
                        "<td>"+"</td>"+
                        "<td>"+data1.users[i].planeName+"</td>"+
                        "<td>"+"</td>"+
                        "<td>"+"</td>"+
                        "<td>"+data1.users[i].stops+"</td>"+
                    "</tr>"+
                "</table>"+"</a>"   +          
           "</li>";
    }
    output += "</ul>";

    document.getElementById("placeholder").innerHTML=output;

答案 6 :(得分：0)

您可以通过li元素的索引获取所需的值：

$("#placeholder a").click(function(event){
    event.preventDefault();
    var index = $(event.currentTarget).parent().index(),
        value = data1.users[index];
    console.log(value);
});

http://jsfiddle.net/0f10qt27/2/

相关问题
最新问题