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> 

希望能帮助到你！