json data not returning values

Question

I'm currently trying to "foreach" some json data, but console is not returning anything, while it should return values (integers) of progress bars.

My current PHP file that should return the json data

$jsonData = [
    'progress' => [
        'health_pc' => $my->hp_percent,
        'energy_pc' => $my->energy_percent,
        'awake_pc'  => $my->awake_percent,
        'nerve_pc'  => $my->nerve_percent,
        'exp_pc'    => $my->exp_percent,
    ]
];

echo json_encode($jsonData);

How I handle it in javascript:

// Progress Bars
            $.each(jsonData.progress, function() {
                $.each(this, function(k, v) {
                    console.log(k + '-' + v);
                });
            });    

Note that the console.log() doesn't log anything.

What i'm trying to achieve is to adjust the progress bars when the %'s change, normally I would do:

$('#health_pc').css('width', jsonData.progress.health_pc + '%');
$('#energy_pc').css('width', jsonData.progress.energy_pc + '%');
$('#awake_pc').css('width', jsonData.progress.awake_pc + '%');
$('#nerve_pc').css('width', jsonData.progress.nerve_pc + '%');
$('#exp_pc').css('width', jsonData.progress.exp_pc + '%');

but I want to foreach this rather than writing this all out.

Any help would be greatly appreciated.

Edit 1 Output of json_encode()

{"progress":{"health_pc":100,"energy_pc":100,"awake_pc":100,"nerve_pc":100,"exp_pc":3}}

Answer 1

You must change your jQuery function to the following, you don't need two each methods.

 const jsonData = {"progress":{"health_pc":100,"energy_pc":100,"awake_pc":100,"nerve_pc":100,"exp_pc":3}}; console.log(jsonData); $.each(jsonData.progress, function(k, v) { console.log(k + '-' + v); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

As long as the php variables are no arrays themselves one level of for each should be enough:

$.each(jsonData.progress, function(k, v) {
     $('#'+k).css('width', v + '%');
})

Answer 3

You can use a vanilla javascript for loop.

 let $jsonData = { 'progress': { 'health_pc': 15, 'energy_pc': 33, 'awake_pc': 21, 'nerve_pc': 87, 'exp_pc': 9, } }; let myFunction = function() { for (var key in $jsonData.progress) { if ($jsonData.progress.hasOwnProperty(key)) { $('#' + key).css('width', $jsonData.progress[key] + '%'); $('#' + key).children('span').html($jsonData.progress[key] + '%'); } } }; myFunction(); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" id='health_pc' style="width:70%"> <span></span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" id='energy_pc' style="width:70%"> <span></span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" id='awake_pc' style="width:70%"> <span></span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" id='nerve_pc' style="width:70%"> <span></span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" id='exp_pc' style="width:70%"> <span></span> </div> </div> 

Hope it helps!