数组不会在我JSON.stringify时更新

Question

我下面有这段代码，当我单击它时，它可以将数组值传输到另一个数组。例如，当我单击lime时，它将移至我的Green Array中。问题是在我JSON.stringify我的Green Array之后，它没有显示更新的值。

因此，这是之前，我添加了一个green array具有5 values的值。

这是之后，我在 green array 中添加了一个值，如您所见，当我将数组中的值增加时，我不知道不知道为什么当我stringify数组时，它不具有我要添加的值stringify，因为我想将更新的数据发送到服务器。发生这种情况有什么原因吗？

var red = {};
var green = {};
var random = {};
var fruits = [];

var fruits1 = {["fruit"]:"Apple", ["type"]:"1"}
var fruits2 = {["fruit"]:"Tomato", ["type"]:"1"}
var fruits3 = {["fruit"]:"Lime", ["type"]:"2"}
var fruits4 = {["fruit"]:"Guava", ["type"]:"2"}

fruits.push(fruits1,fruits2,fruits3,fruits4);

var randomFruits = fruits.filter(x => x.fruit).map(x => x.fruit);

var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry','Pomegranate','Rassberry'];

var key2 = "Green Fruits";
green[key2] = ['Watermelon', 'Durian', 'Avacado','Lime','Honeydew'];

var key3 = "Random Fruits";
random[key3] = randomFruits;

 function redraw() {
     var combineString = '';
     $.each(red[key], function(index) {
         combineString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
     });
     $('.combineclass').html(combineString);

     $.each(green[key2], function(index) {
         combineString += ('<div class="pilldiv greenpill class">' + green[key2][index] + '</div>');
     });
     $('.combineclass').html(combineString);

     var randomString = '';
     $.each(random[key3], function(index) {
         randomString += ('<div class="pilldiv randompill class">' + random[key3][index] + '</div>');
     });
     $('.randomclass').html(randomString);
	}
	
	
 function listener() {
	 
	$(document).ready(function() {
    $(document).on("click", "#randomid div", function() {
            data = this.innerHTML;
			k1 = Object.keys(random).find(k => random[k].indexOf(data) >= 0)
            index = random[k1].indexOf(data);
            random[k1].splice(index, 1);
            for (let i = 0; i < fruits.length; i++) {
            	if (fruits[i].fruit === data) {
              	if (fruits[i].type === "1") {
                	red[key].push(data);
                } else {
                	green[key2].push(data);
                }
              }
            }
            $(".total_count_Green_Fruits").html(key2 + ': ' + green[key2].length);
            var element = $(this).detach();
            $('#combineid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');
          });
      });
	  
	   $('body').on('click', 'div.new-green-fruit', function() {
        data2 = this.innerHTML;
        for (let i = 0; i < fruits.length; i++) {
        	if (fruits[i].fruit === data2) {
          	if (fruits[i].type === "1") {
            	k2 = Object.keys(red).find(k => red[k].indexOf(data2) >= 0);
              index2 = red[k2].indexOf(data2);
              red[k2].splice(index2, 1);
            } else {
            	k2 = Object.keys(green).find(k => green[k].indexOf(data2) >= 0);
              index2 = green[k2].indexOf(data2);
              green[k2].splice(index2, 1);
            } 
          }
        }
        random[key3].push(data2);
        $(this).detach();
        var element2 = $(this).detach();
        $('#randomid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');
	   });
	}
	redraw();
	listener();
	
	var testing = JSON.stringify(green);

.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}
.randompill:after{
    content: "\002B";
    float: left;
	width:16px;
}
.new-green-fruit:after{
    content: "\292B";
    float: left;
	width:16px;
}
.redpill {
  background-color: Pink;
  cursor:default;
}
.greenpill {
  background-color: SpringGreen;
    cursor:default;

}
.randompill {
  background-color: LightBlue;
    cursor:pointer;
}
 .class {
  font-family: Open Sans;
}
.center {
  display: flex;
  justify-content: center;
}
.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.top {
	margin-bottom: 20px
}
h3{
font-weight: normal;
}
.panel {
    display: table;
    height: 100%;
    width: 60%;
	background-color:white;
	border: 1px solid black;
	margin-left: auto;
    margin-right: auto;
}
.new-green-fruit{
background-color: LightBlue;
cursor:pointer;
}
.top{
margin-bottom:30px;
}

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="//#" />
</head>

<body>
        <div class="panel">
        <div style="float:left;width:calc(50% - 5px);">
            <h3 class="class center">Total Fruits</h3>
            <div id="combineid" class="combineclass wrappingflexbox top"></div>
        </div>

        <div style="float:right;width:calc(50% - 5px)">
            <h3 class="class center">Random Fruits</h3>
            <div id="randomid" class="randomclass wrappingflexbox top"></div>
        </div>
    </div>

    </body>
</html>

Answer 1

它工作正常。正确查看代码库可能是您遗漏了一些东西。

var greenFruits = ["Watermelon", "Durian", "Avacado", "Lime", "Honeydew"];

console.log("Green Fruits Object : ", greenFruits);

console.log("Green Fruits String : ", JSON.stringify(greenFruits));

greenFruits.push("Guava");

console.log("Green Fruits Object : ", greenFruits);

console.log("Green Fruits String : ", JSON.stringify(greenFruits));