json數據未返回值

Question

我目前正在嘗試“散布”一些json數據，但控制台未返回任何內容，而應返回進度條的值（整數）。

我當前的PHP文件應返回json數據

$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);

我如何在javascript中處理它：

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

請注意， console.log()不會記錄任何內容。

我要達到的目的是在％的更改時調整進度條，通常我會這樣做：

$('#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 + '%');

但是我想講這個而不是全部寫出來。

任何幫助將不勝感激。

編輯 json_encode() 1個輸出

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

Answer 1

您必須將jQuery函數更改為以下內容， each方法不需要兩個。

 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

只要php變量本身沒有數組，每個變量的一個級別就足夠了：

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

Answer 3

您可以使用普通javascript for循環。

 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> 

希望能幫助到你！