堆栈内存溢出
  简体   繁体   English

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

[英]access specific data from fetched json file

 原文  2014-11-04 16:33:43  3   7    jquery/ json

问题描述

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. 嗨，我是前端开发的新手，我已经获取了json数据并将其作为列表<li>项目添加到html中，但是我的问题是当我单击列表格式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 个解决方案

解决方案1
 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. 一种是将data-属性添加到tr标签，然后可以使用该属性返回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;

解决方案2
 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变量添加到您的li中，例如<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>

解决方案3
 0  2014-11-04 16:41:49

First, get all the child td elements; 首先，获取所有子td元素； 

$("#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() . 不要忘记将event参数传递给您的点击处理程序，否则您应该在event.preventDefault()上遇到错误。

解决方案4
 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. 我在链接标记中添加了几个data属性，您可以在点击处理程序中访问它。 

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>

解决方案5
 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> . 达到目的的另一种方法是将class属性添加到td类中，以表示它们类似<td class="depTime">deptime_data_here</td> 。

Then in your click event, you can fetch each data you need in the dom like so : 然后在您的click事件中，您可以像这样在dom中获取所需的每个数据： 

 $("#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. 基本上，您需要在dom中添加信息，以便以后可以轻松解析它。

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. 您甚至可以在td中添加input ，例如<td><input class="depTime" value="deptime_data_here"/></td> ，然后直接使用val函数而不是innerHtml函数。

解决方案6
 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 并在锚点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;

解决方案7
 0 已采纳  2014-11-04 17:09:33

you can take needed value by index of li element: 您可以通过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/ http://jsfiddle.net/0f10qt27/2/

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 正确提取JSON文件，但未在控制台日志中显示获取的数据 - JSON file is fetched correctly but fetched data are not displayed in console log 从JSON获取的数据未获得更新 - Data fetched from JSON not getting updated 如何从json文件访问json数据 - How to access json data from json file 显示CSV / JSON文件中的特定数据 - Displaying specific data from a CSV/JSON file 从JSON文件中提取/抓取特定数据 - Extract/scrape specific data from JSON file 从外部文件访问 json 数据 - Access json data from external file 通过 Ajax 解析 PHP 文件获取的 JSON 数据时出现问题 - Problem parsing through Ajax a JSON data fetched by PHP file 如何从从数据库获取的json数据中获取特定值？ - How to get particular value from json data fetched from database? 如何从json数据访问第一个或特定对象 - How to access first or specific object from json data 脚本服务，用于解析从url获取的json数据 - script service for parsing json data fetched from the url
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM