CODEWITHSUNDEEP
javascriptphpjqueryjson
Love2Code
Love2Code

Reputation: 918

json data not returning values

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

Upvotes: 0

Views: 375

Answers (3)

Ele
Ele

Reputation: 33726

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!

Upvotes: 1

puelo
puelo

Reputation: 6027

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

Upvotes: 1

Dez
Dez

Reputation: 5838

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>

Upvotes: 1

Related Questions