当我 JSON.stringify 时，数组不会更新答案

【问题标题】：Array wont update when i JSON.stringify it当我 JSON.stringify 时，数组不会更新
【发布时间】：2018-06-24 07:43:26
【问题描述】：

我在下面有这段代码，当我单击它时，它能够将数组值传输到另一个数组。例如，当我点击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>

【问题讨论】：

很难理解您遇到了什么问题。您似乎声称如果您有一个数组，请将其字符串化，它第一次就可以正常工作。当您修改该数组时，再次对其进行字符串化，它不会显示修改？我觉得这很难相信。
如果只显示相关代码，并且您可以将其缩减到演示问题所需的最低限度，那会更容易提供帮助。我的意思是，如果你有一个数组并对其进行字符串化，它几乎将是该数组的字符串版本，所以你要么（a）忽略重新字符串化它，要么（b）不在你的数组上操作认为你是。
@DaveNewton 正如您在第二张图片中看到的那样，当我 console.log(green) 时，它显示了更新后的 array，但是当我 console.log 我的 testing 变量时，它没有显示更新后的我版本。我将代码底部的green array 字符串化，我认为它应该可以工作，但它没有。
@DaveNewton 或者它实际上已经工作了，只是我无法在浏览器的控制台上打印出来？？
...testing 在您对其进行字符串化时设置。对green 的后续更改与testing 中的值完全无关。

标签： javascript html arrays json

【解决方案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));

【讨论】：