Nesting Json Data with jquery

Question

I have this data from a csv file that i have to use in a dependant dropdown with jquery. I can't figure out if it is possible to nest the data i received for what i already have coded.

CSV file

Banco   Tarjeta Cuotas  Medio_Pago  Coeficiente TEA      CFT
Santander Visa    1   modulodepago2    1        0.00%    0.00%
Santander Visa    1        nps        1.0262    18.56%  22.84%
Frances   Visa    1   modulodepago2    1         0.00%  0.00%
Frances  Master   2        nps        1.0262    18.56%  22.84%

My json data comes like this

 [{"banco":"Santander","tarjeta":"Visa","cuotas":"1","medio_pago":"modulodepago2",
 "coeficiente":"1","tea":"0.00%","cft":"0.00%"},
 {"banco":"Santander","tarjeta":"Visa","cuotas":"1","medio_pago":"nps",
 "coeficiente":"1.0262","tea":"18.56%","cft":"22.84%"} ...
  etc...

Is there a way i can nest this json data like this (+ adding unique names and id's)?

var myJson = {
  "banco": [
      {
          "name": "Santander",
          "id": "Santander",
          "tarjeta": [
              {
                  "name": "Visa",
                  "id": "SantanderVisa",
                  "cuotas": [
                      {
                          "name": "1",
                          "id": "SantanderVisa1",
                          "medio_pago": "modulodepago2"
                          "coeficiente": "1",
                          "tea": "0.00%",
                          "cft": "0.00%",
                      },
                      {
                          "name": "1",
                          "id": "SantanderVisa2",
                          "medio_pago": "nps"
                          "coeficiente": "1.0262",
                          "tea": "18.56%",
                          "cft": "22.84%",
                      }
                  ]
              }
          ]
      },
      {
          "name": "Frances",
          "id": "Frances",
          "tarjeta": [
              {
                  "name": "Visa",
                  "id": "FrancesVisa",
                  "cuotas": [
                      {
                          "name": "1",
                          "id": "FrancesVisa1",
                          "medio_pago": "modulodepago2"
                          "coeficiente": "1",
                          "tea": "0.00%",
                          "cft": "0.00%",
                      }
                  ]
              },
              {
                  "name": "Master",
                  "id": "FrancesMaster",
                  "cuotas": [
                      {
                          "name": "2",
                          "id": "FrancesMaster2",
                          "medio_pago": "nps"
                          "coeficiente": "1.0262",
                          "tea": "18.56%",
                          "cft": "22.84%",
                      }
                  ]
              }
          ]
      }
  ]
}

It is very much possible. Can you share a small, but complete sample? — Kalpesh Singh, Feb 08 '17 at 14:33
You can sort an object: http://stackoverflow.com/questions/1069666/sorting-javascript-object-by-property-value — ntgCleaner, Feb 08 '17 at 14:40

score 1 · Answer 1 · edited Feb 08 '17 at 15:26

1

try something like this you get all medio_pago for the others objects you just use the object name. I haven't tested it but I'm sure this will work for you.

var Json = ...

$.each(Json, function(i, item) {
    alert(myJson[i].banco.tarjeta.cuotas.medio_pago);
});

edited Feb 08 '17 at 15:26

Rob Lyndon

12,089
5
49
74

answered Feb 08 '17 at 14:46

demopix

159
6

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"banco":"Otros bancos o tarjetas","tarjeta":"Cencosud","cuotas":"1","medio_pago":"mercadopago_standard","coeficiente":"1","tea":"0.00%","cft":"0.00%"},{"banco":"Otros bancos o tarjetas","tarjeta":"Cencosud","cuotas":"6","medio_pago":"mercadopago_standard","coeficiente":"1","tea":"0.00%","cft":"0.00%"} – aguisa Feb 08 '17 at 15:40

score 1 · Accepted Answer · answered Feb 08 '17 at 16:03

You will need to group by keys. An easy way to do this is to use Lodash or Underscore.js.

I used Papa Parse to convert the CSV data into JSON.

var csvData = $('#csv-data').text().trim();
var jsonData = Papa.parse(csvData, { delimiter:',', header:true }).data;

var transformedJson = {
  banco : _.chain(jsonData)
  .groupBy('Banco')
  .toPairs()
  .map(banco => {
    return {
      name : banco[0],
      id: banco[0],
      tarjeta : _.chain(banco[1])
      .groupBy('Tarjeta')
      .toPairs()
      .map(tarjeta => {
        return {
          name: tarjeta[0],
          id: banco[0] + tarjeta[0],
          cuotas: _.map(tarjeta[1], cuota => {
            return {
              name: cuota['Cuotas'],
              id: banco[0] + tarjeta[0] + cuota['Cuotas'],
              medio_pago: cuota['Medio_Pago'],
              coeficiente: cuota['Coeficiente'],
              tea: cuota['TEA'],
              cft: cuota['CFT']
            }
          })
        };
      })
    }
  }).value()
}

console.log(JSON.stringify(transformedJson, null, 2));

.as-console-wrapper { top: 0; max-height: 100% !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.4/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<textarea id="csv-data" style="display:none" rows="5" cols="72">
Banco,Tarjeta,Cuotas,Medio_Pago,Coeficiente,TEA,CFT
Santander,Visa,1,modulodepago2,1,0.00%,0.00%
Santander,Visa,1,nps,1.0262,18.56%,22.84%
Frances,Visa,1,modulodepago2,1,0.00%,0.00%
Frances,Master,2,nps,1.0262,18.56%,22.84%
</textarea>

Nesting Json Data with jquery

2 Answers2