堆栈内存溢出
  繁体   English   中英

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

[英]access specific data from fetched json file

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

问题描述

嗨，我是前端开发的新手，我已经获取了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

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

更新此行以包含索引： 

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

然后在点击功能 

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

解决方案2
 0  2014-11-04 16:41:47

您应该将i变量添加到您的li中，例如<li data-user-id='1'></li> 。 我修改了您的示例，向您展示了方法。 

 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

首先，获取所有子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()上遇到错误。

解决方案4
 0  2014-11-04 16:42:47

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

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

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

检查下面的代码片段，让我知道。 

 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

达到目的的另一种方法是将class属性添加到td类中，以表示它们类似<td class="depTime">deptime_data_here</td> 。

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

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

基本上，您需要在dom中添加信息，以便以后可以轻松解析它。

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

解决方案6
 0  2014-11-04 16:53:42

您可以像下面这样简单地传递值。 这是演示

编写新函数并根据需要传递值 

    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;

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

您可以通过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/

暂无
暂无

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

相关问题 正确提取JSON文件，但未在控制台日志中显示获取的数据 从JSON获取的数据未获得更新 如何从json文件访问json数据 显示CSV / JSON文件中的特定数据 从JSON文件中提取/抓取特定数据 从外部文件访问 json 数据 通过 Ajax 解析 PHP 文件获取的 JSON 数据时出现问题 如何从从数据库获取的json数据中获取特定值？ 如何从json数据访问第一个或特定对象 脚本服务，用于解析从url获取的json数据
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM