JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul id="menu">
</ul>
</div>
JavaScript
var JsonVar;
$.getJSON("https://api.myjson.com/bins/lz839", function(jsonData) {
var types = {};
jsonData.forEach(function(item) {
if (!types[item.keyword]) {
types[item.keyword] = 0;
}
types[item.keyword]++;
});
var keywordsCountObject = {};
for (var typeKey in types) {
var keywordItemsToCount = typeKey.toString().split(", ");
keywordItemsToCount.forEach(function(itemToCount) {
console.log(itemToCount);
if (!keywordsCountObject.hasOwnProperty(itemToCount)) {
keywordsCountObject[itemToCount] = 1;
} else {
keywordsCountObject[itemToCount]++;
}
});
}
for (var prop in keywordsCountObject) {
$("ul#menu").append("<li>" + prop + " " + keywordsCountObject[prop].toString() + "</li>");
}
});