jQuery $.getJSON按索引匹配数组 实现灾害名与数量对应展示

原有代码的问题很明确：

• 直接遍历接口返回的根级data对象，两次循环拿到的值分别是disasterName、disasterCount两个完整数组，插入页面时JS会自动把数组转成逗号分隔的字符串，根本不会做配对。
• 没有利用两个数组索引一一对应的关系，把同位置的灾害名和数量拼接到一起。

接口返回的两个数组长度一致、索引是对应关系，只要遍历其中一个数组，用相同索引取另一个数组的对应值，按要求格式拼接就行。

$.getJSON(urlLink, function(data){
  var disasterData = '';
  $("#currentChartDisaster").empty();
  $("#currentChartDisaster").append("<h2>Jumlah Bencana Terjadi Bulan Ini</h2>");

  // 遍历灾害名称数组，用索引匹配对应数量
  $.each(data.disasterName, function(index, disasterName){
    var disasterCount = data.disasterCount[index];
    disasterData += '<h3>' + disasterName + ' : ' + disasterCount + '</h3>';
  })
  $('#currentChartDisaster').append(disasterData);
});

如果你不需要每个条目都用<h3>标签，想要纯文本换行的效果，可以把拼接行替换成下面任意一种写法：

• 用div块级元素自动换行：disasterData += '<div>'+ disasterName +' : '+ disasterCount +'</div>';
• 用换行符实现简单换行：disasterData += disasterName +' : '+ disasterCount +'<br>';

调整后就能得到你预期的输出：

Fire Forest : 60
Earthquake : 50

内容的提问来源于stack exchange，提问作者Timotius Hadi Pratama