1

Tengo varios elementos HTML en los cuales obtengo los valores usando JQuery y array:

var trads = $("select[name='personal[]']").map(function(){return $(this).val();}).get();
var num_trad = trads.length;

var langs = new Array();
var values = new Array();
var approved = new Array();

for (var i=1; i<=num_trad; i++){
      langs.push($("select[name='lang_"+i+"[]']").map(function(){return $(this).val();}).get());
      values.push($("input[name='words_"+i+"[]'").map(function(){return $(this).val();}).get());
      values.push($("input[name='approved_"+i+"[]'").map(function(){return $(this).val();}).get());
}

console.log(trads);
console.log(langs);
console.log(values);
.divs{float:left;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="personal[]">
     <option value="1001">Mark</option>
     <option value="1002">Rose</option>
    </select>
    
<div style="clear:both;">
 <div class="divs">
    <select name="lang_1[]">
     <option value="English">English</option>
     <option value="Spanish">Spanish</option>
    </select>
 </div>
 <div class="divs">
    <input name="words_1[]" value="302">
    <input name="approved_1[]" value="yes">
 </div>
</div>

<div style="clear:both;">
  <div class="divs">
    <select name="lang_1[]">
     <option value="English">English</option>
     <option value="Spanish" selected>Spanish</option>
    </select>
  </div>
  <div class="divs">
    <input name="words_1[]" value="180">
    <input name="approved_1[]" value="no">
 </div>
</div>

<hr style="clear: both;">
<select name="personal[]">
     <option value="1001">Mark</option>
     <option value="1002" selected>Rose</option>
    </select>
    
<div style="clear:both;">
 <div class="divs">
    <select name="lang_2[]">
     <option value="English">English</option>
     <option value="Spanish" selected>Spanish</option>
    </select>
 </div>
 <div class="divs">
    <input name="words_2[]" value="236">
    <input name="approved_2[]" value="yes">
 </div>
</div>

<hr style="clear: both;">

Como se muestra en el resultado se muestra de manera separada y me gustaría ordenar estos valores como un JSON string obteniendo algo similar como esto:

"1001":{ content:[{ language: "English", words: "302", approved: "yes" }, { language: "Spanish", words: "180", approved: "no" }] }, "1002":{ content:[{ language: "Spanish", words: "236", approved: "yes" }] }

¿Cómo puedo lograrlo?

Agradeceré su ayuda.

2 respuestas 2

2

Para que el json resultante quede como quieres puedes colocar los valores en una cadena concatenandolos usando plantillas de cadenas, también necesitas un for que recorra el array de personal y otro que recorra los lenguajes que tiene para que queden separados, cuidando que estén definidos:

El código queda funcionando de la siguiente forma:

var trads = $("select[name='personal[]']").map(function(){return $(this).val();}).get();
var num_trad = trads.length;

var langs = new Array();
var values = new Array();
var approved = new Array();

for (var i=1; i<=num_trad; i++){
      langs.push($("select[name='lang_"+i+"[]']").map(function(){return $(this).val();}).get());
      values.push($("input[name='words_"+i+"[]'").map(function(){return $(this).val();}).get());
      approved.push($("input[name='approved_"+i+"[]'").map(function(){return $(this).val();}).get());
}

//console.log(trads);
//console.log(langs);
//console.log(values);
var lenguajes=2;

var sjson=`[`;
for (var i=0; i<num_trad; i++){
  sjson+=`{"personal": "${trads[i]}","content": [`;
  for(var h=0; h<lenguajes&&langs[i][h]!=undefined; h++){
    sjson+=`{"language":"${langs[i][h]}",`;
    sjson+=`"words":"${values[i][h]}",`;
    sjson+=`"approved":"${approved[i][h]}"}`;
    if(langs[i][h+1]!=undefined)
      sjson+=',';      
  }
  sjson+=']}';      
  if(i+1<num_trad)
    sjson+=',';
}
sjson+=']';
console.log(sjson);
.divs{float:left;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="personal[]">
     <option value="1001">Mark</option>
     <option value="1002">Rose</option>
    </select>
    
<div style="clear:both;">
 <div class="divs">
    <select name="lang_1[]">
     <option value="English">English</option>
     <option value="Spanish">Spanish</option>
    </select>
 </div>
 <div class="divs">
    <input name="words_1[]" value="302">
    <input name="approved_1[]" value="yes">
 </div>
</div>

<div style="clear:both;">
  <div class="divs">
    <select name="lang_1[]">
     <option value="English">English</option>
     <option value="Spanish" selected>Spanish</option>
    </select>
  </div>
  <div class="divs">
    <input name="words_1[]" value="180">
    <input name="approved_1[]" value="no">
 </div>
</div>

<hr style="clear: both;">
<select name="personal[]">
     <option value="1001">Mark</option>
     <option value="1002" selected>Rose</option>
    </select>
    
<div style="clear:both;">
 <div class="divs">
    <select name="lang_2[]">
     <option value="English">English</option>
     <option value="Spanish" selected>Spanish</option>
    </select>
 </div>
 <div class="divs">
    <input name="words_2[]" value="236">
    <input name="approved_2[]" value="yes">
 </div>
</div>

<hr style="clear: both;">

y este es el resultado:

[{
    "personal": "1001",
    "content": [{
        "language": "English",
        "words": "302",
        "approved": "yes"
    }, {
        "language": "Spanish",
        "words": "180",
        "approved": "no"
    }]
}, {
    "personal": "1002",
    "content": [{
        "language": "Spanish",
        "words": "236",
        "approved": "yes"
    }]
}]

Espero te sea de ayuda, saludos.

3
  • 1
    Gracias por tu respuesta, acabo de probar el código y funciona. Tengo una consulta, el valor de la variable lenguajes es la cantidad de idiomas de los select, sin embargo, si hubiese el caso de que esta cantidad de idiomas variara, ¿Cómo sería en ese caso?
    – NekoLopez
    Commented el 8 ago. 2019 a las 17:48
  • @NekoLopez si lo puse para ese caso, si tuvieras mas lenguajes solo tendrías que cambiar ese número Commented el 8 ago. 2019 a las 17:51
  • Ok, lo tengo claro. Gracias!
    – NekoLopez
    Commented el 8 ago. 2019 a las 18:00
0

He incluido una rutina adicional para que la salida sea de tipo JSON en tu codigo, espero que pueda servirte.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <select name="personal[]">
             <option value="1001">Mark</option>
             <option value="1002">Rose</option>
            </select>
            
        <div style="clear:both;">
         <div class="divs">
            <select name="lang_1[]">
             <option value="English">English</option>
             <option value="Spanish">Spanish</option>
            </select>
         </div>
         <div class="divs">
            <input name="words_1[]" value="302">
            <input name="approved_1[]" value="yes">
         </div>
        </div>
        
        <div style="clear:both;">
          <div class="divs">
            <select name="lang_1[]">
             <option value="English">English</option>
             <option value="Spanish" selected>Spanish</option>
            </select>
          </div>
          <div class="divs">
            <input name="words_1[]" value="180">
            <input name="approved_1[]" value="no">
         </div>
        </div>
        
        <hr style="clear: both;">
        <select name="personal[]">
             <option value="1001">Mark</option>
             <option value="1002" selected>Rose</option>
            </select>
            
        <div style="clear:both;">
         <div class="divs">
            <select name="lang_2[]">
             <option value="English">English</option>
             <option value="Spanish" selected>Spanish</option>
            </select>
         </div>
         <div class="divs">
            <input name="words_2[]" value="236">
            <input name="approved_2[]" value="yes">
         </div>
        </div>
        
        <hr style="clear: both;">
        <span id="res"> nada</span>

        <script>
            var trads = $("select[name='personal[]']").map(function(){return $(this).val();}).get();
            var num_trad = trads.length;

            var langs = new Array();
            var values = new Array();
            var approved = new Array();

            for (var i=1; i<=num_trad; i++){
                langs.push($("select[name='lang_"+i+"[]']").map(function(){return $(this).val();}).get());
                values.push($("input[name='words_"+i+"[]'").map(function(){return $(this).val();}).get());
                approved.push($("input[name='approved_"+i+"[]'").map(function(){return $(this).val();}).get());
            }
            
            /*
            console.log(trads);
            console.log(langs);
            console.log(values);
            console.log(approved);
            */ 
            
            // ----------------------------------------------
            // listado de arreglo para json
            var arreglo = new Array();

            // carga de valores
            for (var i = 0; i < trads.length; i++) {
               var list = {   'trads'   : trads[i],
                              'content' :[]
                          };
                           // guardas los datos del array       
                                 list['content'].push({
                                 "language": langs[i].toString(),
                                 "words":   values[i].toString(),
                                 "approved": approved[i].toString()
                              });
              arreglo.push(list);
            }
            
            json = JSON.stringify(arreglo); // aqui tienes la lista de objetos en Json            
            $("#res").text('' + json ); // salida ver resultado
            // ----------------------------------------------------------
        </script>
</body>
</html>

Los arreglos se unifican para generar una salida tipo JSON como esta:

[{"trads":"1001","content": 
[{"language":"English,Spanish","words":"302,180","approved":"yes,no"}]}, 
 {"trads":"1002","content": 
[{"language":"Spanish","words":"236","approved":"yes"}]}
1
  • Gracias por tu respuesta, pero quisiera que los idiomas estén por separado como en el ejemplo que puse en la pregunta, ¿Cómo sería en ese caso?
    – NekoLopez
    Commented el 8 ago. 2019 a las 16:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.