javascript多维数组到json字符串

Question

我有以下 html/jquery sn-p

基本上它由一些可编辑的 div 组成。当按下按钮时，数据被解析并打包为一个名为 json 的 javascript 数组。我的愿望是将名为 json 的 javascript 数组转换为有效的 json 字符串。我可以看到我的数组，但 JSON.stringify 对于创建的数组无法正常工作。

感谢您提供的任何帮助

$('#presend_btn').click(function() {
  event.preventDefault();

    var json = [];
    var innercount=0;
    
  $('#reporting-agent-data').each(function() {
    var tmpdiv = $(this).find('.agent-data');
    
    $(tmpdiv).each(function() {
    
    json[innercount] = [];
        
      var agent_id = $(this).attr('agent-id');
      console.log("agent_id: " + agent_id);
      var r_name = $(this).find('.r-name').text();
      var r_relation = $(this).find('.r-relation').text();
      var r_phone = $(this).find('.r-phone').text();
      var r_details = $(this).find('.r-details').text();
      json[innercount]["r_name"] = r_name;
      json[innercount]["r_relation"] = r_relation;
      json[innercount]["r_phone"] = r_phone;
      json[innercount]["r_details"] = r_details;
      innercount++;
    });
    
    console.dir(json);
    var myJSON = JSON.stringify(json);
  });

}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reporting-agent-data">
                 <div class="row text-center agent-data equal" agent-uuid="0" agent-id="11">
                  <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
                  <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
                </div>
                 <div class="row text-center agent-data equal" agent-uuid="0" agent-id="2">
                  <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
                  <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
                </div>
                 <div class="row text-center agent-data equal" agent-uuid="0" agent-id="3">
                  <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
                  <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
                </div>
            </div>
            
            
            <div class="row">
                <div class="col-md-12">
                    <div id="agent-data-json">json will go here</div>
                </div>
            </div>
            
            <input type="button" name="presend_btn" value="pre send actions" id="presend_btn" />

Answer 1

这个答案解释得最好https://*.com/a/25422420/9238321

您应该使用对象数组。尝试将json[innercount] = []; 更改为json[innercount] = {};

$('#presend_btn').click(function() {
  event.preventDefault();

    var json = [];
    var innercount=0;
    
  $('#reporting-agent-data').each(function() {
    var tmpdiv = $(this).find('.agent-data');
    
    $(tmpdiv).each(function() {
    
    json[innercount] = {};
        
      var agent_id = $(this).attr('agent-id');
      console.log("agent_id: " + agent_id);
      var r_name = $(this).find('.r-name').text();
      var r_relation = $(this).find('.r-relation').text();
      var r_phone = $(this).find('.r-phone').text();
      var r_details = $(this).find('.r-details').text();
      json[innercount]["r_name"] = r_name;
      json[innercount]["r_relation"] = r_relation;
      json[innercount]["r_phone"] = r_phone;
      json[innercount]["r_details"] = r_details;
      innercount++;
    });
    
    console.dir(json);
    var myJSON = JSON.stringify(json);
    console.log('stringify', myJSON);
  });

}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reporting-agent-data">
                 <div class="row text-center agent-data equal" agent-uuid="0" agent-id="11">
                  <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
                  <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
                </div>
                 <div class="row text-center agent-data equal" agent-uuid="0" agent-id="2">
                  <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
                  <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
                </div>
                 <div class="row text-center agent-data equal" agent-uuid="0" agent-id="3">
                  <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
                  <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
                  <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
                </div>
            </div>
            
            
            <div class="row">
                <div class="col-md-12">
                    <div id="agent-data-json">json will go here</div>
                </div>
            </div>
            
            <input type="button" name="presend_btn" value="pre send actions" id="presend_btn" />