Home » Jquery » jquery – How to propagate the 3d array into a table of 3 separate table data tags?

jquery – How to propagate the 3d array into a table of 3 separate table data tags?

Posted by: admin February 22, 2020 Leave a comment

Questions:
$('#goback').click(function () {
    window.history.back();
});
var cartitem = [];
var pp, name;
var i = 0,html="";
function adcart(name, value) {
    i++;
    name = name;
    pp = value;
    var t = parseInt(i * pp);
    console.log(t);
    cartitem.push([name, value]);
    console.log(cartitem);
}
$("button").click(function () {
    console.log("selected items" + i);
    console.log(cartitem.length);
    for (var m = 0; m < cartitem.length; m++) {
        for (var n = 0; n < cartitem.length; n++) {
            html +='<tr><td>'+cartitem[m]+'</td><td>'+cartitem[n]+'</td></tr>';
        }
    }
    $("#showcart").html(html);
});

How to propagate the 2d array into a table of 2 separate table data tags? here in html i only have table tag with table body as its id name is “showcart”. And with respect t the above script, how to propagate from javascript 2d array to the html tag so that cartitem[i] should be in one td tag and cartitem[j] should be in anothen td tag

How to&Answer:

There was couple of js issues here,

  1. You add cart item with adcart(), and you are also invoking a button click event, no need for that.
  2. You are declared an html variable and add items to it, you need to clear this variable before the for loop, or there is no need for an extra variable there, remove it and use a variable inside the for loop, so you can save some memory.

PLease check the updated snippet.

$('#goback').click(function() {
  window.history.back();
});
var cartitem = [];
var pp, name;
var i = 0,
  html = "";

function adcart(name, value) {
  let image = event.target.parentElement.parentElement.firstElementChild.getAttribute('src');
  i++;
  name = name;
  pp = value;
  var t = parseInt(i * pp);
  var newItem = {
    name,
    value,
    image
  }
  cartitem.push(newItem);
  showCartItems(newItem)
}

function showCartItems(item) {
  html = '';
  html += "<tr>";
  html += `<td>${item.name}</td>`;
  html += `<td>${item.value}</td>`;
  html += `<td><img src='${item.image}' height='50px' width='50px' /></td>`;
  html += "</tr>";
  $("#showcart").append(html);
}
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> <title>Offer Zone</title> <style> .add { width: auto !important; text-align: center !important; font-size: 10px !important; width: auto !important; } .row { padding: 25px; } .card { height: 165px !important; } .cardcol { width: auto; padding-left: 0%; padding-right: 12px; height: 150px !important; padding-bottom: 25px !important; } .card-title { font-size: 15px; height: 30px !important; text-align: center !important; } .row { padding-bottom: 5px !important; height: 220px !important; } .card-img-top { width: 100% !important; height: 64.23px !important; } .navbar-brand i:hover { cursor: pointer !important; } .scrollmenu { background-color: rgba(197, 139, 31, 0.575); overflow: auto; white-space: nowrap; } .scrollmenu a { display: inline-block; color: white; text-align: center; padding: 5px; text-decoration: none; } .scrollmenu a:hover { background-color: rgba(240, 248, 255, 0.76); color: black; } .sc1 { background-color: rgba(153, 197, 31, 0.856); overflow: auto; white-space: nowrap; font-size: 18px !important; } .sc1 a { display: inline-block; color: white; text-align: center; padding: 5px; text-decoration: none; } .sc1 a:hover { background-color: rgba(240, 248, 255, 0.76); color: black; } .card-text { height: 80px !important; } </style> </head> <body> <nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand" id="goback"><i class="fas fa-arrow-left"></i></a> <form class="form-inline" style="margin-left: -40px!important;"> <input class="form-control mr-sm-2" type="search" placeholder="Search Offers" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <i class="fas fa-shopping-cart pl-2"></i> </form> </nav> <div class="scrollmenu"> <a href="#"><img src="https://lh3.googleusercontent.com/proxy/mIOiq4aAW6ss7SJGtPGapcLgrePfsu68TCA9sFzns2CaGXqFo0kA5gY_yLflFUZZUVtM3U1NdOVDlrKhZDtE5PueZvHcEWyn-DO1cNyXPTAyMG2HmakVRMxCvKhQPG1J4w" class="img-fluid" style="height: 30px; width: 25px;"><br>Deals of the day</a> <a href="#"><img src="https://i.ya-webdesign.com/images/sale-png-icon-8.png" class="img-fluid" style="height: 30px; width: 25px;"><br>Stock clearence</a> <a href="#"><img src="https://icons-for-free.com/iconfiles/png/512/basic-sticker-week-131994876053238198.png" class="img-fluid" style="height: 30px; width: 25px;"><br>Big steals of the week</a> <a href="#"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/Folder%20and%20Places/Stack.png" class="img-fluid" style="height: 30px; width: 25px;"><br>Save more</a> </div> <div class="scrollmenu sc1 mt-2"> <a href="#">All</a> <a href="#">Beauty</a> <a href="#">Toys & More</a> <a href="#">Home Furniture</a> <a href="#">Electronics</a> </div> <div class="container"> <div class="row"> <div class="col-sm-4 col-4 cardcol"> <a href="#"> <div class="card"> <img class="card-img-top img-fluid" src="https://media.architecturaldigest.com/photos/5a00e0d2f0511d186d9210d3/master/w_1600%2Cc_limit/built-ins-starrett-ringbom-1.jpg" alt="Card image cap"> <!-- <div class="card-body"> --> <p class="card-title" name="name" value="Home">Home</p> <p class="card-text"> <input type="number" class="form-control" value="30000" id="price" disabled> <button id="add" type="button" value="30000" name="Home" class="btn btn-primary add" onclick="adcart(this.name,this.value);">Add to cart</button></p> <!-- </div> --> </div> </a> </div> <div class="col-sm-4 col-4 cardcol"> <a href="#"> <div class="card"> <img class="card-img-top img-fluid" src="https://cdn.elkor.lv/media/catalog/category/vigodno_all_.png" alt="Card image cap"> <!-- <div class="card-body"> --> <p class="card-title" id="appliances" name="name" value="Appliances">Appliances</p> <p class="card-text"> <input type="number" class="form-control" value="90000" id="price" disabled> <button id="add" type="button" value="60000" name="appliances" class="btn btn-primary add" onclick="adcart(this.name,this.value);">Add to cart</button></p> <!-- </div> --> </div> </a> </div> <div class="col-sm-4 col-4 cardcol"> <a href="#"> <div class="card"> <img class="card-img-top img-fluid" src="https://s3.sywcdn.net/getImage?url=%2F%2Fs2.sywcdn.net%2Fuser%2Fd51d_20668099.jpg&t=category&w=300&h=300&qlt=100&mrg=1&crpw=2&crph=2&s=1471afeb0212a7f7ec8627dde75ce94c" alt="Card image cap"> <!-- <div class="card-body"> --> <p class="card-title" id="Sports" name="name" value="Sports & More">Sports & More</p> <p class="card-text"> <input type="number" class="form-control" value="60000" id="price" disabled> <button id="add" type="button" name="sports & more" value="90000" class="btn btn-primary add" onclick="adcart(this.name,this.value);">Add to cart</button> </p> <!-- </div> --> </div> </a> </div> </div> <div class="row"> <div class="col-sm-4 col-4 cardcol"> <a href="#"> <div class="card"> <img class="card-img-top img-fluid" src="https://media.architecturaldigest.com/photos/5a00e0d2f0511d186d9210d3/master/w_1600%2Cc_limit/built-ins-starrett-ringbom-1.jpg" alt="Card image cap"> <!-- <div class="card-body"> --> <p class="card-title">Home</p> <!-- </div> --> </div> </a> </div> <div class="col-sm-4 col-4 cardcol"> <a href="#"> <div class="card"> <img class="card-img-top img-fluid" src="https://cdn.elkor.lv/media/catalog/category/vigodno_all_.png" alt="Card image cap"> <!-- <div class="card-body"> --> <p class="card-title">Appliances</p> <!-- </div> --> </div> </a> </div> <div class="col-sm-4 col-4 cardcol"> <a href="#"> <div class="card"> <img class="card-img-top img-fluid" src="https://s3.sywcdn.net/getImage?url=%2F%2Fs2.sywcdn.net%2Fuser%2Fd51d_20668099.jpg&t=category&w=300&h=300&qlt=100&mrg=1&crpw=2&crph=2&s=1471afeb0212a7f7ec8627dde75ce94c" alt="Card image cap"> <!-- <div class="card-body"> --> <p class="card-title">Sports & More</p> <!-- </div> --> </div> </a> </div> </div> <div class="row"> <div class="col-sm-4 col-4 cardcol"> <a href="#"> <div class="card"> <img class="card-img-top img-fluid" src="https://media.architecturaldigest.com/photos/5a00e0d2f0511d186d9210d3/master/w_1600%2Cc_limit/built-ins-starrett-ringbom-1.jpg" alt="Card image cap"> <!-- <div class="card-body"> --> <p class="card-title">Home</p> <!-- </div> --> </div> </a> </div> <div class="col-sm-4 col-4 cardcol"> <a href="#"> <div class="card"> <img class="card-img-top img-fluid" src="https://cdn.elkor.lv/media/catalog/category/vigodno_all_.png" alt="Card image cap"> <!-- <div class="card-body"> --> <p class="card-title">Appliances</p> <!-- </div> --> </div> </a> </div> <div class="col-sm-4 col-4 cardcol"> <a href="#"> <div class="card"> <img class="card-img-top img-fluid" src="https://s3.sywcdn.net/getImage?url=%2F%2Fs2.sywcdn.net%2Fuser%2Fd51d_20668099.jpg&t=category&w=300&h=300&qlt=100&mrg=1&crpw=2&crph=2&s=1471afeb0212a7f7ec8627dde75ce94c" alt="Card image cap"> <!-- <div class="card-body"> --> <p class="card-title">Sports & More</p> <!-- </div> --> </div> </a> </div> </div> <table class="table table-responsive"> <thead> <tr> <td>Name</td> <td>Price</td> </tr> </thead> <tbody id="showcart"> </tbody> </table> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> <script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> <script> $(document).ready(function() { $('body').bootstrapMaterialDesign(); }); </script> <script src="https://kit.fontawesome.com/596df9a01c.js" crossorigin="anonymous"></script> <script src="cartscript.js"></script> </body> </html>