javascript multidimentional array to json string

Question

I have the following html/jquery snippet

Basically it consists of some div that are editable. When button is pressed, the data is parsed and packaged as a javascript array with the name json. My wish is to turn the javascript array named json into a valid json string. I can see my array but JSON.stringify does not work properly for the array created.

Thank you for any help rendered

$('#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

This answer explains it best https://stackoverflow.com/a/25422420/9238321

You should be using an array of objects. Try changing json[innercount] = []; to 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" />