Create JSON with multiple values

Question

I need to create a JSON with data every time I click on a button BTN. Here is how I create my JSON :

$(document).ready(function () {
    var maj = {};

    $("#btnSubmitRejetRefModele").click(function() {
        maj['one'] = 'a'
        maj['two'] = 'b'
        maj['three'] = 'c'

    }

Values a,b,c are changing every time and I want to store each value in a JSON with the structure :

maj = {
  "0" : {'one':'a','two':'b','three':'b'} , 
  "1" : {'one':'a2','two':'b2','three':'c2},
  // ...
}

How can I code and append my data in my JSON each time I click on the button. This JSON will be used in a post method to insert values into PGsql

Tamas Szoke · Accepted Answer · 2020-03-11 15:30:24Z

You need to check the size of the current object, and insert the data to the position of that size:

$(document).ready(function() {
  var maj = {};

  $("#btnSubmitRejetRefModele").click(function() {
    var size = Object.keys(maj).length;
    var data = {
      one: 'a' + (size+1),
      two: 'b' + (size+1),
      three: 'c' + (size+1)
    }
    maj[size] = data;
    console.clear();
    console.log(maj);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnSubmitRejetRefModele">Add</button>

If you need an alternative, here's my original answer, which is using an array of objects, you can use it later as maj[0], maj[1], and so on:

$(document).ready(function() {
  var maj = [];

  $("#btnSubmitRejetRefModele").click(function() {
    var data = {
      one: 'a',
      two: 'b',
      three: 'c'
    }
    maj.push(data);
    console.clear();
    console.log(maj);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnSubmitRejetRefModele">Add</button>

This is not exactly the format you need, but maybe helps.

I support your solution but keep in mind that it's better if you also explain it a bit.

justGoscha · Accepted Answer · 2020-03-11 15:05:01Z

An alternative could be storing it in an array.

let data = {
   myArray: [{'one':'a','two':'b','three':'b'}]
}

Then every time you can just add data by adding to that array.

data.myArray.push({'one':'a2','two':'b2','three':'b2'})

Advantage, no need to keep track of any counter variables. Disadvantage, removing things from the array might be less performant or less convenient. But that depends on the use case.

Readability is the most important thing when writing code you want to maintain.

Kavian Rabbani · Accepted Answer · 2020-03-11 15:06:52Z

0

You should keep track of button clicks count, and use it when creating the new part of your JSON object.

var maj = {};
var counter = 0;

$("#btnSubmitRejetRefModele").click(function() {
    var temp = {}
    temp['one'] = aNewValue
    temp['two'] = bNewValue
    temp['three'] = cNewValue

    maj[counter++] = temp
}

but finally, I recommend you to use an array instead of an object(it's already indexed)
just push your new created objects in it and whenever you wanted to convert it to an object, do this:

myObject = Object.assign({}, maj);

edited Mar 11, 2020 at 15:06

answered Mar 11, 2020 at 14:53

Kavian Rabbani

9845 silver badges15 bronze badges

1 Comment

justGoscha Over a year ago

you forgot to store temp in maj[counter++]

Collectives™ on Stack Overflow

Create JSON with multiple values

3 Answers 3

2 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Related