How can i get the values of each element of JSON file

Question

i have created this from the servlet and passed it through response.setContentType("application/json"); Json file:

   [
      {
        "id": "1",
        "tsnm": "John1",
        "userId": "RoySoha",
        "date": "2020-04-22",
        "Button": "<button type='button'  id='opener' class='btn btn-warning'><i class='fa fa-pencil' aria-hidden='true'></i></button> &nbsp&nbsp <button type='button' id='sure' class='btn btn-danger'><i class='fa fa-trash' aria-hidden='true'></i></button>"
      },
      {
        "id": "2",
        "tsnm": "John2",
        "userId": "RoySoha",
        "date": "2020-04-22",
        "Button": "<button type='button'  id='opener' class='btn btn-warning'><i class='fa fa-pencil' aria-hidden='true'></i></button> &nbsp&nbsp <button type='button' id='sure' class='btn btn-danger'><i class='fa fa-trash' aria-hidden='true'></i></button>"
      },
      {
        "id": "3",
        "tsnm": "John3",
        "userId": "RoySoha",
        "date": "2020-04-22",
        "Button": "<button type='button'  id='opener' class='btn btn-warning'><i class='fa fa-pencil' aria-hidden='true'></i></button> &nbsp&nbsp <button type='button' id='sure' class='btn btn-danger'><i class='fa fa-trash' aria-hidden='true'></i></button>"
      }
    ]

My code : Now when i am trying to access the JSON it is only returning me each array value like

{"id":"1","tsnm":"John1","userId":"RoySoha","date":"2020-04-22","Button":"<button type='button'  id='opener' class='btn btn-warning'><i class='fa fa-pencil' aria-hidden='true'></i></button> &nbsp&nbsp <button type='button' id='sure' class='btn btn-danger'><i class='fa fa-trash' aria-hidden='true'></i></button>"}

So now, How can i get id, tsnm values individually? "id"=1, "tsnm"="John1" etc

$('#apps').change(function(event) { 
             var id = $("select#apps").val();

             $.get('PopulateTableController', {
                 ApplicationId : id
             }, function(response) {
                console.log(response);
                //$.getJSON(response, function(data){
                    alert("from json");
                    var ed = '';
                    //data = JSON.parse(response);
                    //console.log(data);
                    $(response).each(function(key, value){
                        console.log(value)
                        var x1 = value.id;var x2 = value.tsnm;var x3 = value.userId;var x4 = value.date;var x5 = value.Button;
                        console.log(x1);
                    });
                    $('.tab').append(ed);
                    console.log(ed);
                //});
         });
         });

I need each of the value of ID, tsnm etc. Can you please help me?

Answer 1

You're placing the response object inside a jQuery object in order to iterate over it. Don't do that. Just use a forEach() loop:

// mock AJAX callback:
let response = [
  { "id": "1", "tsnm": "John1", "userId": "RoySoha", "date": "2020-04-22", "Button": " &nbsp&nbsp " }, 
  { "id": "2", "tsnm": "John2", "userId": "RoySoha", "date": "2020-04-22", "Button": " &nbsp&nbsp " }, 
  { "id": "3", "tsnm": "John3", "userId": "RoySoha", "date": "2020-04-22", "Button": " &nbsp&nbsp "}
]

response.forEach(value => {
  var x1 = value.id;
  var x2 = value.tsnm;
  var x3 = value.userId;
  var x4 = value.date;
  var x5 = value.Button;
  console.log(x1, x2, x3, x4, x5);
});

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

Update based on comments below

When i am printing the response value on the console it looks like this:
["{"id":"1","tsnm":"John1","userId":"RoySoha","date"…='fa fa-trash' aria-hidden='true'>"}", "{"id":"2","tsnm":"John2","userId":"RoySoha","date"…='fa fa-trash' aria-hidden='true'>"}", "{"id":"3","tsnm":"John3","userId":"RoySoha","date"…='fa fa-trash' aria-hidden='true'>"}"]

The minor, but very important difference there is that the response is an array holding multiple JSON encoded strings. You need to decode each of them before you work with them. Try this:

// mock AJAX callback:
let response = [
  '{"id":"1","tsnm":"John1","userId":"RoySoha","date":"2020-04-22","Button":"your HTML..."}', 
  '{"id":"2","tsnm":"John2","userId":"RoySoha","date":"2020-04-22","Button":"your HTML..."}',
  '{"id":"3","tsnm":"John3","userId":"RoySoha","date":"2020-04-22","Button":"your HTML..."}'
]

response.forEach(json => {
  let value = JSON.parse(json);
  var x1 = value.id;
  var x2 = value.tsnm;
  var x3 = value.userId;
  var x4 = value.date;
  var x5 = value.Button;
  console.log(x1, x2, x3, x4, x5);
});

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

Answer 2

If your JSON object array length is fixed. The you can use

var data =  [ { "id": "1", "tsnm": "John1", "userId": "RoySoha", "date": "2020-04-22", "Button": " &nbsp&nbsp " }, { "id": "2", "tsnm": "John2", "userId": "RoySoha", "date": "2020-04-22", "Button": " &nbsp&nbsp " }, { "id": "3", "tsnm": "John3", "userId": "RoySoha", "date": "2020-04-22", "Button": " &nbsp&nbsp " } ];

console.log(data[0].id);

If JSON object array length is dynamic

var data =  [ { "id": "1", "tsnm": "John1", "userId": "RoySoha", "date": "2020-04-22", "Button": " &nbsp&nbsp " }, { "id": "2", "tsnm": "John2", "userId": "RoySoha", "date": "2020-04-22", "Button": " &nbsp&nbsp " }, { "id": "3", "tsnm": "John3", "userId": "RoySoha", "date": "2020-04-22", "Button": " &nbsp&nbsp " } ];


$(data).each(function(key, value){
    var temp_data = value;
    console.log('Index value No :' + key);
    console.log('ID = ' + temp_data.id);
    console.log('TSNM = ' + temp_data.tsnm);
    console.log('User ID = ' + temp_data.userid);
    console.log('Date = ' + temp_data.date);
    console.log('Button Value = ' + temp_data.Button);
    console.log('----------------------------------------------');
});

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>