Список данных карты в HTML с использованием Javascript / jQuery

Question

Я пытаюсь отобразить данные в HashMap в виде списка <li> в HTML

Я получаю желаемый вывод в repl.it .Но то же самое я пытаюсь сделать в Codepen Я не получаю список, вместо этого получаю следующий вывод.

Вывод: function(e,t){return new w.fn.init(e,t)}

var unitInfo = new Map();

var RR = "RR-1066600 RR-1080800 RR-1076500 RR-1076300 RR-1076200 RR-1076100 RR-1076000 RR-1075500 RR-1075100 RR-1075000 RR-1074300 RR-1074200 RR-1074100 RR-1074000 RR-1073700 RR-1073400 RR-1073100 RR-1073000 RR-1072700 RR-1072600 RR-1072600 RR-1072600 RR-1072600 RR-1072500 RR-1072400 RR-1072300 RR-1072100 RR-1072100 RR-1072100 RR-1072000 RR-1071900 RR-1071800 RR-1071700 RR-1071600 RR-1071500 RR-1071400 RR-1071300 RR-1071100 RR-1071000 RR-1070900 RR-1070800 RR-1070700 RR-1070200 RR-1069900 RR-1069800 RR-1069700 RR-1069300 RR-1069200 RR-1069100 RR-1068900 RR-1068200 RR-1067500 RR-1067400 RR-1067300 RR-1067100 RR-1067000 RR-1066700 RR-1066300 RR-1066200 RR-1066000 RR-1065800 RR-1065700 RR-1065500 RR-1065100 RR-1064900 RR-1064500 RR-1064400 RR-1064300 RR-1064200 RR-1064100 RR-1063400 RR-1063300 RR-1063200 RR-1063100 RR-1062900 RR-1062800 RR-1062400 RR-1062300 RR-1062200 RR-1061900 RR-1061300 RR-1061200 RR-1059400 RR-1059300 RR-1059200 RR-1059000 RR-1058900 RR-1058700 RR-1058500 RR-1058300 RR-1058200 RR-1058000 RR-1057700 RR-1057500 RR-1057000 RR-1056900 RR-1056800 RR-1056100 RR-1056000 RR-1055700 RR-1055400 RR-1055100 RR-1054900 RR-1054800 RR-1054400 RR-1054300 RR-1054200 RR-1053800 RR-1053400 RR-1053300 RR-1052900 RR-1052800 RR-1052500 RR-1050200 RR-1049000 RR-1048600 RR-1047700 RR-1046700 RR-1046100 RR-1046000 RR-1045700 RR-1044800 RR-1044700 RR-1043700 RR-1043400 RR-1043200 RR-1043100 RR-1042600 RR-1042500 RR-1042400 RR-1042200 RR-1042100 RR-1041000 RR-1040900 RR-1040600 RR-1040100 RR-1039700 RR-1037900 RR-1036500 RR-1036100 RR-1035500 RR-1034300 RR-1033700 RR-1032000 RR-1030900 RR-1030800 RR-1030100 RR-1028200 RR-1028100 RR-1027900 RR-1027600 RR-1026900 RR-1024300 RR-1023500 RR-1020500 RR-1014800 RR-1014100 RR-1010200 RR-1008400 RR-1007500 RR-1006800 RR-1005900 RR-1005700 RR-1004600 RR-1002700 RR-1000700 RR-999500 RR-991900 RR-989600 RR-965200 RR-961000 RR-960200 RR-954100 RR-952100 RR-938000 RR-924300 RR-917700 RR-910700 RR-909200 RR-890200 RR-857800 RR-840400 RR-830400 RR-828000 RR-790400 RR-788200";
var quantity = "1.00 5.00 2.00 2.00 2.00 2.00 2.00 2.00 1.00 3.00 4.00 7.00 1.00 5.00 1.00 1.00 1.00 2.00 1.00 1.00 2.00 3.00 2.00 2.00 1.00 2.00 1.00 1.00 1.00 1.00 3.00 1.00 1.00 1.00 5.00 1.00 9.00 1.00 1.00 3.00 4.00 1.00 1.00 1.00 1.00 1.00 2.00 2.00 2.00 1.00 1.00 1.00 1.00 1.00 1.00 2.00 1.00 1.00 2.00 1.00 1.00 1.00 1.00 1.00 2.00 2.00 2.00 2.00 1.00 3.00 8.00 3.00 1.00 1.00 1.00 2.00 1.00 2.00 1.00 2.00 2.00 2.00 1.00 1.00 1.00 2.00 2.00 3.00 3.00 3.00 4.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 4.00 4.00 1.00 2.00 1.00 4.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 2.00 1.00 1.00 3.00 1.00 1.00 3.00 2.00 2.00 2.00 1.00 1.00 3.00 7.00 6.00 2.00 1.00 1.00 3.00 1.00 1.00 1.00 2.00 1.00 1.00 6.00 2.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 3.00 1.00 1.00 1.00 2.00 1.00 3.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 3.00 3.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 1.00 2.00 1.00 1.00 3.00 1.00 1.00 1.00 1.00";

RR = RR.split(" ");
quantity = quantity.split(" ");

//Find Total Sum
var sum = 0;

//Make a HashMAP and Count Total Sum
for (var i = 0; i < RR.length; i++) {
  if (unitInfo.has(RR[i])) {
    unitInfo.set(RR[i], unitInfo.get(RR[i]) + parseInt(quantity[i]));
    // console.log(RR[i] + " "+unitInfo.get(RR[i]))
  } else {
    unitInfo.set(RR[i], parseInt(quantity[i]));
  }
  sum += parseInt(quantity[i]);
}
maxCount = sum;

//My Try of Getting the Data
function printData(data) {
  // var str = '';
  for (var key in data) {
    console.log(data.get["RR-1058000"])
  }
  return 2;
};

//jQuery which will display the Map as <li>
$(document).ready(
  function(unitInfo) {
    $('ul').append('<li>' + unitInfo + '</li>');
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list">
  <ul>

  </ul>
</div>

Возможно, я не правильно звоню.

Дополнительный вопрос: Являются ли Map и HashMap одинаковыми в ES6?

Answer 1

В вашем $(document).ready вы должны выполнить итерацию по вашей карте, а затем сгенерировать элементы списка, такие как:

$(document).ready(function(){
   for (var [key, value] of unitInfo.entries()) 
   {
       $('ul').append('<li>' + key + "=>"  + value+ '</li>');
   }
  });

Вот CodePen