Google Sheet To Html Json Data - On Click Show New Box Show Data
I am trying to fetch data from the google sheet, through JSON format and show in HTML. which is fine. What I want, onclick on items or arrow Open the sidebar and fetch relative da
Solution 1:
I created a global array called myData. When the service is called, the array is reset and records are added. Each record is built to contain the data that you want to work with. The index is saved to the record so it can be used to find the record in myData when an element is selected.
I decided to add onclick methods to the elements you want to use to show the details, which is clientname and the arrow icon. Clicking an element passes the index that is tied to the record and is used to reference the data in myData.
var myData = [];
// an example function that will get the data by index so it can be used however you wantfunctionshowDetails(index) {
var selectedData = myData[index];
alert(JSON.stringify(selectedData, null, 2));
}
$.getJSON("https://spreadsheets.google.com/feeds/list/1XaFRnQfNPRP86UPNcdgQuCCH6AeVe5FZOxBHaIPZDpM/od6/public/values?alt=json", function(data) {
myData = []; // reset whenever data loadsvar sheetData = data.feed.entry;
var i;
for (i = 0; i < sheetData.length; i++) {
var dataPoint = {
name: data.feed.entry[i]['gsx$slipno']['$t'],
id: data.feed.entry[i]['gsx$id']['$t'],
clientname: data.feed.entry[i]['gsx$clientname']['$t'],
delivery: data.feed.entry[i]['gsx$delivery']['$t']
};
myData.push(dataPoint); // add data point to array to reference later// var email = data.feed.entry[i]['gsx$email']['$t'];// var delivery = data.feed.entry[i]['gsx$delivery']['$t'];document.getElementById('demo').innerHTML +=
('<tr class="dd d-flex justify-content-around">' +
'<td>' +
" <span id='" + 't' + dataPoint.id + "'>" + dataPoint.name + '</span>' +
'<span class="cn" onclick="showDetails(' + i + ');">' + dataPoint.clientname + '</span>' +
'</td>' +
'<td class="ml-auto gg" onclick="showDetails(' + i + ');">' +
'</td>' +
'</tr>');
}
});tbody>tr>td>span {
text-align: left;
display: block;
}
.dd {
border-bottom: rgb(202, 202, 202) solid 1px;
display: block;
}
.cn {
font-weight: 700;
}
.gg::before {
content: ">";
}<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!-- Font Awesome --><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"><!-- Google Fonts --><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"><!-- Bootstrap core CSS --><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"rel="stylesheet"><!-- Material Design Bootstrap --><linkhref="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css"rel="stylesheet"><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><!-- Bootstrap tooltips --><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script><!-- Bootstrap core JavaScript --><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script><!-- MDB core JavaScript --><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script></head><body><navclass="navbar navbar-expand-lg navbar-light bg-light"><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarTogglerDemo01"aria-controls="navbarTogglerDemo01"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarTogglerDemo01"><aclass="navbar-brand"href="#"> brand</a><ulclass="navbar-nav mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li></ul></div></nav><divclass="container text-center my-4"><!-- Table --><tableclass="table "id="testTable"><!-- Table head --><thead><tr><th>Google Sheet Data</th></tr></thead><!-- Table head --><!-- Table body --><tbodyid="demo"></tbody><!-- Table body --></table><!-- Table --></div></body></html>
Post a Comment for "Google Sheet To Html Json Data - On Click Show New Box Show Data"