堆棧內存溢出
  簡體   English   中英

從提取的json文件訪問特定數據

[英]access specific data from fetched json file

 原文  2014-11-04 16:33:43  8   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