Problem when creating Multidimensional Array with Jquery

Question

I need to create an array this way:

"M":["02328280006985",{"61","63"},],"NM":["02328280007876",{"62","64"}]} 

but it’s coming out that way:

"M":["02328280006985",{"61":[],"62":[],"63":[],"64":[]},{"61":[],"62":[],"63":[],"64":[]}],"NM":["02328280006985",{"61":[],"62":[],"63":[],"64":[]}]}

My code is this:

var var ds_rateio = {};
var teste = {};
$('select[name="insTipoRateio[]"] option:selected').each(function() {
if(typeof(ds_rateio[$(this).val()]) == 'undefined' || typeof(teste[$(this).attr("data-nf")]) == 'undefined'){
    ds_rateio[$(this).val()] = [];
    teste[$(this).attr("data-nf")] = [];
}
ds_rateio[$(this).val()].push($(this).attr("data-cnpj"));
$.each(ds_rateio, function(key1, value) {
    value.push(teste);
});
});
var ds_rateio = JSON.stringify(ds_rateio);

My Html:

<tr>
<td>
    <div>
        <select class="insTipoRateio" id="insTipoRateio" name="insTipoRateio[]">
            <option value="M" data-nf="61"data-cnpj="02328280007876">M</option>
        </select>
    </div>  
</td>
<td>
    <div>
        <select class="insTipoRateio" id="insTipoRateio" name="insTipoRateio[]">
            <option value="NM" data-nf="62"data-cnpj="02328280006985">NM</option>
        </select>
    </div>  
</td>
<td>
    <div>
        <select class="insTipoRateio" id="insTipoRateio" name="insTipoRateio[]">
            <option value="M" data-nf="63"data-cnpj="02328280007876">M</option>
        </select>
    </div>  
</td>
<td>
    <div>
        <select class="insTipoRateio" id="insTipoRateio" name="insTipoRateio[]">
            <option value="NM" data-nf="64"data-cnpj="02328280006985">NM</option>
        </select>
    </div>  
</td>

Anyone can help?

Answer 1

Personally I think that your approach has become a little complicated, and I prefer to show another way to solve it, by a simpler way.

I started by creating a function that tests if a property exists in an object and if it doesn’t exist, creates it with a certain value. Then for each option use this function to create the value and cnpj if they do not exist. At the end just add the attribute value nf that becomes complete.

Code:

const ds_rateio = {};

const criaPropSeVazio = (obj, prop, valor) => { 
  if (!(prop in obj)){
    obj[prop] = valor;
  }
};

$('select[name="insTipoRateio[]"] option:selected').each(function() {
  let valor = $(this).val();
  criaPropSeVazio(ds_rateio, valor, {});
  
  let cnpj = $(this).data("cnpj");
  criaPropSeVazio(ds_rateio[valor], cnpj, []);

  let nf = $(this).data("nf");
  ds_rateio[valor][cnpj].push(nf);
});

console.log(ds_rateio);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<td>
    <div>
        <select class="insTipoRateio" id="insTipoRateio" name="insTipoRateio[]">
            <option value="M" data-nf="61"data-cnpj="02328280007876">M</option>
        </select>
    </div>  
</td>
<td>
    <div>
        <select class="insTipoRateio" id="insTipoRateio" name="insTipoRateio[]">
            <option value="NM" data-nf="62"data-cnpj="02328280006985">NM</option>
        </select>
    </div>  
</td>
<td>
    <div>
        <select class="insTipoRateio" id="insTipoRateio" name="insTipoRateio[]">
            <option value="M" data-nf="63"data-cnpj="02328280007876">M</option>
        </select>
    </div>  
</td>
<td>
    <div>
        <select class="insTipoRateio" id="insTipoRateio" name="insTipoRateio[]">
            <option value="NM" data-nf="64"data-cnpj="02328280006985">NM</option>
        </select>
    </div>  
</td>