JSON counts to HTML

Question

I have a JSON file and I want to use javascript/jQuery to count its contents and list the results.

Here's the initial code:

var globalJsonVar;
$.getJSON("index.json", function(json) {
  globalJsonVar = json;

  /* Having fetched the json, search and index type:keyword */
  var types = {};
  json.forEach(function(item) {
    if (!types[item.keyword]) {
      types[item.keyword] = 0;
    }
    types[item.keyword]++;
    $('#menu').text(JSON.stringify(types));
  });
});

• Q1: How do I pass it to html?
• Q2: Can I split the "keyword" field to an array and count what's inside it as discrete entries? This is the JSON file.

Update Q1 is already fixed here: https://jsfiddle.net/5089L59x/4/

Answer 1

you are searching for for...in loop:

var keyValues = [];

json.forEach(function(item){
if(!types[item.keyword]){types[item.keyword] = 0;}
    types[item.keyword]++
})
for (var attr in types) {
    console.log(attr)
    console.log(types[attr])
    $('#menu ul').append("<li>"+types[attr]+" <span>"+attr+"</span></li>")
    keyValues.push({key: types[attr], value: [attr]})
  }
console.log(keyValues)

html:

<div id="menu">
  <ul>

  </ul>
</div>

updated fiddle: https://jsfiddle.net/k8xn0n5v/6/

further reading: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...in

greetings

Answer 2

Answer for Q1: Basically all you have to do is to use the (for .. in .. ) loop to use all properties of an object. (the types object in this case)

var JsonVar;
$.getJSON("https://api.myjson.com/bins/1ba5at", function(jsonData) {
  var types = {};
  jsonData.forEach(function(item) {
    if (!types[item.keyword]) {
      types[item.keyword] = 0;
    }
    types[item.keyword]++;
  });

  for (var typeKey in types) {
    var newLiElement = document.createElement("li");
    var valueSpanElement = document.createElement("span");
    var valueTextNode = document.createTextNode(typeKey.toString());
    var keyTextNode = document.createTextNode("keyword: ");
    var countSpanElement = document.createElement("span");
    var countSpanText = document.createTextNode(types[typeKey].toString());

    //here you can style the keys
    valueSpanElement.setAttribute("style", "background-color: blue; color: white;");
    countSpanElement.setAttribute("style", "margin-left: 10px; background-color: black; color: white; text-weight: bold;");

    countSpanElement.appendChild(countSpanText);

    valueSpanElement.appendChild(valueTextNode);

    newLiElement.appendChild(keyTextNode);
    newLiElement.appendChild(valueSpanElement);
    newLiElement.appendChild(countSpanElement);


    document.getElementById("menu").appendChild(newLiElement);
  }
});

Here is the fiddle link: https://jsfiddle.net/k8xn0n5v/5/

Answer for Q2: All you have to do is to create an array from the string keywords using the string.split() method. (in this case, the ', ' argument will work fine)

I have updated the fiddle, now you can find the keyword:count values in an array.

https://jsfiddle.net/5089L59x/15/

Extending the code of your fiddle looks like this:

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>");
  }

});