CODEWITHSUNDEEP
javascriptjqueryjsongoogle-apps-scriptgoogle-sheets
Manish S
Manish S

Reputation: 111

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 enter image description here

Open the sidebar and fetch relative data of item with list like

  1. Slip No : 1207
  2. Client Name: Client
  3. Email : [email protected]
  4. Delivery : Next Sunday

Like Whatsapp look at people's details onclick

enter image description here

   $.getJSON("https://spreadsheets.google.com/feeds/list/1XaFRnQfNPRP86UPNcdgQuCCH6AeVe5FZOxBHaIPZDpM/od6/public/values?alt=json", function(data) {

            var sheetData = data.feed.entry;

            var i;
            for (i = 0; i < sheetData.length; i++) {

                var name = data.feed.entry[i]['gsx$slipno']['$t'];
                var id = data.feed.entry[i]['gsx$id']['$t'];
                var clientname = data.feed.entry[i]['gsx$clientname']['$t'];

                // 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' + id + "'>" + name + '</span>' +
                        '<span class="cn">' + clientname + '</span>' +
                        '</td>' +
                        '<td class="ml-auto gg">' +
                        '</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>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#"> brand</a>
            <ul class="navbar-nav  mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container text-center my-4">

        <!-- Table  -->
        <table class="table " id="testTable">
            <!-- Table head -->
            <thead>
                <tr>
                    <th>Google Sheet Data</th>
                </tr>
            </thead>
            <!-- Table head -->
        
            <!-- Table body -->
            <tbody id="demo">


            </tbody>
            <!-- Table body -->
        </table>
        <!-- Table  -->

    </div>



</body>

</html>

Upvotes: 0

Views: 725

Answers (1)

daddygames
daddygames

Reputation: 1928

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 want
function showDetails(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 loads
            var 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>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#"> brand</a>
            <ul class="navbar-nav  mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container text-center my-4">

        <!-- Table  -->
        <table class="table " id="testTable">
            <!-- Table head -->
            <thead>
                <tr>
                    <th>Google Sheet Data</th>
                </tr>
            </thead>
            <!-- Table head -->
        
            <!-- Table body -->
            <tbody id="demo">


            </tbody>
            <!-- Table body -->
        </table>
        <!-- Table  -->

    </div>



</body>

</html>

Upvotes: 3

Related Questions