Javascript stored only the last one from a loop in an JSON Object

Question

I have a HTML Site with 4 inputRange slidern. If a user click on a button all the values from the ranges should be stored in a nested JSON Object. So far so good, but JS only saves the last one in that Array and not the others before. But all Sliders have different values from 1 to 5, but JS saves only the 4 from the last slider. Here's my code:

    //Speichert die aktuellen Angaben in einem Nested-JSON Objekt
function saveBewertung() {
var jsonObj = {};
var kriterien = []; 
var bewertungen = {};

 //Loop
$('input[type=range]').each(function() {


    var id = $(this).attr("id");
    var note = $(this).val();


    bewertungen.id = id;
    bewertungen.note = note;

    kriterien.push(bewertungen);
    jsonObj.Bewertungen = kriterien;

});

jsonObj.Kommentar  = $('textarea#kommentar').val();


//TEST AUSGABE
alert(JSON.stringify(jsonObj));

}

Result:

Move var bewertungen = {}; in the each(), there must be dupe — Satpal
– Satpal, Commented Feb 23, 2018 at 9:09

gurvinder372 · Accepted Answer · 2018-02-23 09:09:06Z

2

You are pushing the same object to the array again and again. You need to initialize bewertungen every time in the each block.

Declare

var bewertungen = {};

inside the each block

$('input[type=range]').each(function() {
    var bewertungen = {};
    var id = $(this).attr("id");
    var note = $(this).val();    

    bewertungen.id = id;
    bewertungen.note = note;

    kriterien.push(bewertungen);
});
jsonObj.Bewertungen = kriterien;  //this line can be moved out

answered Feb 23, 2018 at 9:09

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ahendwh2 · Accepted Answer · 2018-02-23 09:19:23Z

0

Another possibility next to the solution from @gurvinder372 is to shorten the function so you don't need to declare the variables bewertungen, id and note:

//Speichert die aktuellen Angaben in einem Nested-JSON Objekt
function saveBewertung() {
  var jsonObj = {};
  var kriterien = [];

  //Loop
  $('input[type=range]').each(function() {
    // Anonymous object
    kriterien.push({
        id: $(this).attr("id"),
      note: $(this).val()
    });
  });

  jsonObj.Bewertungen = kriterien;
  jsonObj.Kommentar = $('textarea#kommentar').val();

  //TEST AUSGABE
  alert(JSON.stringify(jsonObj));
}

answered Feb 23, 2018 at 9:19

ahendwh2

4043 silver badges14 bronze badges

Comments

Mustkeem K · Accepted Answer · 2018-02-23 09:44:34Z

0

Here is some description how this thing is working

var bewertungen = {}; // this line declare the object this object will hold values in each loop.

$('input[type=range]').each(function() {
var bewertungen = {};
var id = $(this).attr("id");
var note = $(this).val();    

bewertungen.id = id;   // this line add value to {bewertungen} object key
bewertungen.note = note; // this line add value to {bewertungen} object key

kriterien.push(bewertungen); // every itration will push value to [kriterien] array
});
jsonObj.Bewertungen = kriterien; // this is final array with all values

answered Feb 23, 2018 at 9:44

Mustkeem K

8,9002 gold badges34 silver badges45 bronze badges

Collectives™ on Stack Overflow

Javascript stored only the last one from a loop in an JSON Object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related