cannot retrieve data from table output
Question
When I try to retrieve using my code below, I get [object HTMLTableElement] I have no idea which part went wrong. I am trying to retrieve the directions as shown above and convert it into arrows instead of text direction keys. Thanks for any help.
Here is my code:
function getManeuver() { var url = "https://maps.googleapis.com/maps/api/directions/json?origin=place_id:ChIJ685WIFYViEgRHlHvBbiD5nE&destination=place_id:ChIJA01I-8YVhkgRGJb0fW4UX7Y&key=YOUR_API_KEY"; $.ajax({ type: "GET", url: url, dataType: "json", success: function (data) { console.log('success', data); drawTable(data); } }); function drawTable(data) { for (var i = 0; i < data.routes[0].legs[0].steps.length; i++) { drawRow(data.routes[0].legs[0].steps[i]); } } function drawRow(steps) { var row = $("<tr />") $("#personDataTable").append(row); row.append($("<td>" + steps.maneuver + "</td>")); } } function getArrows() { var myTab = document.getElementById('personDataTable'); document.getElementById("Arrows").innerHTML = myTab; }
<!DOCTYPE html> <html> <head> <title>Get Code</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/table2.js"></script> <link rel="stylesheet" href="css/table.css"> </head> <body> <button onclick="getManeuver()">Get Maneuver</button> <table id="personDataTable"> <tr> <th>Maneuver</th> </tr> </table> <button onclick="getArrows()">Get Arrows</button> <p id="Arrows"></p> </body> </html>
I have results as shown:
Maneuver
undefined
turn-left
turn-left
turn-left
turn-right
turn-right
2 answers
solution1
2
The problem is you are getting whole table in document.getElementById("Arrows").innerHTML that's why you are getting [object HTMLTableElement] you need to append the table till you reach the element you want to print on label like the below
var myTab = document.getElementById('personDataTable'); document.getElementById("Arrows").innerHTML = myTab; console.log(myTab); console.log(document.getElementById('personDataTable').children[0].children[0].children[0].innerText);//the output of this will be "Maneuver" console.log(document.getElementById('personDataTable').children[0].children[0].children.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <button onclick="getManeuver()">Get Maneuver</button> <table id="personDataTable"> <tr> <th>Maneuver</th> </tr> </table> <button onclick="getArrows()">Get Arrows</button> <p id="Arrows"></p>
solution2
1 ACCPTED 2018-12-10 05:55:55
document.getElementById function will return DOM element with the specified id. That's why all you got there is [object HTMLTableElement].
Instead, what you should try to achieve is retrieving the text inside your <td> elements. Since you're using jquery, maybe you should try this instead.
function getArrows() {
$('#personDataTable td').each(function(idx, element) {
var text = $(element).text();
$('#Arrows').append(text + ', ');
});
}
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.