access specific data from fetched json file
Question
Hi i'm new to frontend development, i have fetched json data and added it into the html as list <li> items but my problem is when i click on the list format json i want specific information about that that particular link i clicked to be logged into the console window.
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 answers
solution1
0 2014-11-04 16:41:23
There are a couple of ways to do this. One is to add a data- attribute to the tr tag which you can then use to get back to the data in the JSON.
Update this line to include the index:
"<a href='#'>"+"<table data-index='" + i + "'>"+
Then in the click function
var index = $(this).find("table").data("index");
var valuePrice = data1.users[index].price;
solution2
0 2014-11-04 16:41:47
You should add the i variable to the your li like <li data-user-id='1'></li> . I modified your exemple to show you how.
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;
<!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>
solution3
0 2014-11-04 16:41:49
First, get all the child td elements;
$("#placeholder a").click(function(event) {
event.preventDefault();
var tableCells = $(this).find("td");
console.log(tableCells.get(2).innerHTML, tableCells.get(6).innerHTML);
});
Don't forget to pass the event parameter to your click handler, otherwise you should get an error on event.preventDefault() .
solution4
0 2014-11-04 16:42:47
I have added couple of data attribute to the link tag which you can access it inside your click handler.
var value = $(this).data('deptime') + " - " + $(this).data('price');
If you have to access more from the object, save the index and use it to get the property inside the handler.
Check the below snippet and let me know.
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;
<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>
solution5
0 2014-11-04 16:47:52
Another way of doing what you wnat to acheive is to add class attribute to your td class representing what they are like <td class="depTime">deptime_data_here</td> .
Then in your click event, you can fetch each data you need in the dom like so :
$("#placeholder a").click(function(){
event.preventDefault();
var $this = $(this);
var value = $this.find('.depTime').innerHtml();
console.log(value);
});
Basically, what you need is to add information in the dom to be able to easily parse it afterwards.
You can even add an input in your td like <td><input class="depTime" value="deptime_data_here"/></td> and then use directly val function instead of innerHtml function.
solution6
0 2014-11-04 16:53:42
You can simply pass the value as like below. Here is demo
Write new function and pass the value as what you need
function selectedRow(depTime, price){
console.log(depTime);
console.log(price);
}
And add the above function in anchor 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;
solution7
0 ACCPTED 2014-11-04 17:09:33
you can take needed value by index of li element:
$("#placeholder a").click(function(event){
event.preventDefault();
var index = $(event.currentTarget).parent().index(),
value = data1.users[index];
console.log(value);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.