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

但是我想要预先知道这一点，而不是全力以赴。

非常感谢任何帮助。

修改1 输出json_encode()

{"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

您可以使用vanilla javascript循环播放。

＆＃13;

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

＆＃13;

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

＆＃13;

希望有所帮助！

json数据不返回值

3 个答案: