Convert Json encoded data to javascript array and access value by index

Question

I am getting json response from ajax like this

  echo  json_encode($data);

Ajax code:

  $.ajax({
        url:"PaymentSlip/check", 
        data:{val:val},
        type: 'POST',
        success:function(ajaxresult)
        {
            $("#jgoli").html(ajaxresult);
        }
    });

Result I am getting is:

     [{"paymentId":"2","paymentLabNo":"MR-622-040618",paymentTestId":"1"}]

Now I want to access my json array in javascript by index like

      ajaxresult[0] = 2; i.e paymentId=2
      ajaxresult[1] = 2; i.e paymentLabNo=MR-622-040618

How would I achieve that?

Note: I have tried many examples on stackoverflow, I know this question must have answered earlier. But I am still stuck. Any help would be appreciated.

What are you actually trying to achieve - you want to print, on to the web page, the JSON data but in the format you used as an example? Or are you just trying to parse the data and don't understand how to access the data at all? — Liam MacDonald, Apr 06 '17 at 13:00
Yes, I want to print the data on the web page by index i.e. ajax result['paymentId'] which in my question equals to '2'. — Saad Siddiqui, Apr 06 '17 at 13:12

score 1 · Answer 1 · edited May 23 '17 at 11:54

1

What you are getting is a string of encoded JSON, to use it as an object you must parse it.

Check this answer

edited May 23 '17 at 11:54

Community

1
1

answered Apr 06 '17 at 12:58

tehabstract

529
6
14

ok, I parsed the json response. Now how can I access the parsed data by index? – Saad Siddiqui Apr 06 '17 at 13:10
eval() should be avoided at all costs. There are other safer methods for parsing a string to a JSON object. – Apr 06 '17 at 13:15
You obtain an object using the mthod from above. You can iterate between the values using a code like this `for( key in obj) { if(obj.hasOwnProperty(key) ) console.log(key + " is " + obj[key]) }` – Manuel Cheța Apr 06 '17 at 13:18
Yeah you should use JSON.parse as the answer states. You can use something like `var obj = JSON.parse(ajaxresult)` and then access it like `obj[0]` – tehabstract Apr 06 '17 at 13:27
solved the problem by above answer. Thanks for your time. – Saad Siddiqui Apr 06 '17 at 13:56

score 1 · Accepted Answer · answered Apr 06 '17 at 13:42

$(document).ready(function(){
    var data =  [{"paymentId":"2","paymentLabNo":"MR-622-040618","paymentTestId":"1"}];
    //Loop on the object as key=>value
    $.each(data, function(key, value){
    //And diplay it in the result div
        $('#result').append('<p>'+data[key]['paymentId']+'</p>');
        $('#result').append('<p>'+data[key]['paymentLabNo']+'</p>');
         $('#result').append('<p>'+data[key]['paymentTestId']+'</p>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="result"></div>

score 1 · Answer 3 · edited Mar 13 '18 at 10:20

$(document).ready(function(){

    $.get("ajax_call.php", function(data){
        //console.log(data);
        var result = JSON.parse(data);
        $.each(result, function(key, value){

            $('#data').append('<tr><td>'+result[key]['username']+'</td><td>'+result[key]['email']+'</td><td>'+result[key]['mobile']+'</td></tr>');
            console.log(result[key])

        });

    });

});

score 0 · Answer 4 · answered Apr 06 '17 at 13:14

  $.ajax({
        url:"PaymentSlip/check", 
        data:{val:val},
        type: 'POST',
        datatype: "json", // add this
        success:function(ajaxresult)
        {
            // access return results as
            //ajaxresult[0].paymentId;
            //ajaxresult[0].paymentLabNo;
            //ajaxresult[0].paymentTestId;
            //$("#jgoli").html(ajaxresult);
        }
    });

solved the problem by above answer. Thanks for your time. – Saad Siddiqui Apr 06 '17 at 13:56 — Saad Siddiqui, Apr 06 '17 at 13:56

Convert Json encoded data to javascript array and access value by index

4 Answers4