CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Best Jeanist
Best Jeanist

Reputation: 1129

Move table value from to other table and back

I have this code below that moves the value from Random Fruits to Green Fruits but the problem is i'm trying to make it so that after i move the value into Green Fruits i will be also able to move it back to the Random Fruits Table but i keep getting this error message "message": "Uncaught TypeError: Cannot read property 'indexOf' of undefined", am i doing something wrong with the code below? Any help would be greatly appreciated thanks!

var obj = {};
var obj2 = {};

var key = "Red Fruits";
obj[key] = ['Apple', 'Cherry', 'Strawberry'];
var myArray = [];
myArray.push(obj);

var key2 = "Green Fruits";
obj[key2] = ['Watermelon', 'Durian', 'Avacado'];
var myArray2 = [];
myArray2.push(obj);

var key3 = "Random Fruits";
obj2[key3] = ['Kiwi', 'Pomegranate', 'Honeydew', 'Plum'];
var myArray3 = [];
myArray3.push(obj2);

function redraw(obj) {

  var $header = $("<tr>"),
    cols = 0,
    bodyString = "";

  $.each(obj, function(key, values) {
    cols = Math.max(cols, values.length);
    $header.append($('<th class="total_count_' + key.replace(/\s/g, '_') + '"/>').text(key + ": " + values.length));
  });
  for (var i = 0; i < cols; i++) {
    bodyString += '<tr>';
    $.each(obj, function(key, values) {
      bodyString += '<td>' +
        (values[i] ? values[i] : "") +
        '</td>';
    });
    bodyString += '</tr>';
  }
  $('.fruitsclass thead').html($header);
  $('.fruitsclass tbody').html(bodyString);
  var bodyString = '';
  var headString = '';
  $.each(obj2[key3], function(index) {
    bodyString += ('<tr><td>' + obj2[key3][index] + '</td></tr>');
  });
  headString += ('<tr><th>' + 'Random Fruits' + '</th></tr>');
  $('.fruityclass tbody').html(bodyString);
  $('.fruityclass thead').html(headString);
}

function addNewRow(fruitName) {
  var tds = '<tr><td class="new-row">' + +'</td></tr>';
}

function listener(obj) {
  $(document).ready(function() {
    $("#fruityid td").click(function() {
      data = this.innerHTML;
      k1 = Object.keys(obj2).find(k => obj2[k].indexOf(data) >= 0)
      index = obj2[k1].indexOf(data);
      obj2[k1].splice(index, 1);
      obj[key2].push(data);
      $(".total_count_Green_Fruits").html(key2 + ': ' + obj[key2].length);
      var element = $(this).detach();
      $('#fruitsid > tbody').append('<tr><td></td><td class="new-green-fruit">' + element.html() + '</td></tr>');
    });
  });

  $(document).ready(function() {
    $('body').on('click', '.new-green-fruit', function() {
      console.log("Fruit : " + (this.innerHTML));
      data2 = this.innerHTML;
      k2 = Object.keys(obj).find(j => obj[j].indexOf(data2) >= 0)
      index2 = obj[k2].indexOf(data2);
      obj[k2].splice(index2, 1);
      obj2[key3].push(data2);
    });
  });
}

redraw(obj);
listener(obj);
.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center
}

.skillsTable th {
  border-left: 1px solid #AAA5A4;
  border-right: 1px solid #AAA5A4;
}

table {
  float: left;
  border-collapse: collapse;
  width: 70%
}

td {
  border-left: 1px solid #AAA5A4;
  border-right: 1px solid #AAA5A4;
  padding-top: 8px;
  padding-left: 11px;
  font-size: 15px;
}

th {
  color: #0080ff;
  font-weight: normal;
  border-bottom: 1px solid #AAA5A4;
  padding-bottom: 5px;
}

div {
  margin-bottom: 50px;
}

.new-green-fruit {
  color: lime;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="//#" />
  <div id="result"> </div>
  <div class="center">
    <table id="fruitsid" class="fruitsclass skillsTable class">
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>
  <div class="center">
    <table id="fruityid" class="fruityclass skillsTable class">
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>
  </body>

</html>

Upvotes: 2

Views: 79

Answers (1)

tung yu
tung yu

Reputation: 94

actually all you have to do is update the view. You have done the item shifting correctly.

You see no error first time you do the shift back, because the item is there. You only see the error second time you click the item in the list again. It is because view did not update and the item is gone already!

Upvotes: 1

Related Questions