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}}

• puelo: Can you show the output of json_encode? Also why are you doing a nested loop? Try just $.each(jsonData.progress, function(k, v) { ...
• Love2Code: @puelo added the output of json_encode() - see edit :)

Answer 1

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 + '%');
})

• Love2Code: This did the trick! Thank you so much! Will accept as answer in 1 minute when i'm able to. Again, thank you so much!

Answer 2

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 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!