Javascript JSON计数为HTML

我有一个JSON文件，我想使用javascript/jQuery计算它的内容并列出结果

以下是初始代码：

var globalJsonVar；
$.getJSON（“index.json”，函数（json）{
globalJsonVar=json；
/*获取json后，搜索和索引类型：关键字*/
变量类型={}；
forEach（函数（项）{
如果（！types[item.keyword]）{
类型[项目.关键字]=0；
}
类型[item.keyword]++；
$（'#menu'）.text（JSON.stringify（types））；
});
});

• 问题1：如何将其传递到html
• 问题2：我可以将“关键字”字段拆分为一个数组，并将其中的内容作为离散项进行计数吗？是JSON文件

---

更新Q1已在此处修复：

您正在循环中为…搜索

：

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)

var-keyValues=[]；
forEach（函数（项）{
如果（！types[item.keyword]）{types[item.keyword]=0；}
类型[项目.关键字]++
})
for（类型中的var attr）{
console.log（attr）
console.log（类型[attr]）
$（“#菜单ul”）。追加（“
”+类型[attr]+“+attr+”
”）
push（{key:types[attr]，value:[attr]}）
}
console.log（keyValues）

html:





更新小提琴：

进一步阅读：

问候语
第一季度的答案：
基本上，您所要做的就是使用（for..in..）循环来使用对象的所有属性。（本例中的类型对象）

这里是小提琴链接：

第二季度的答案：
您所要做的就是使用string.split（）方法从字符串关键字创建一个数组。（在这种情况下，“，”参数可以正常工作）

我已经更新了fiddle，现在您可以在数组中找到关键字：count values


扩展小提琴的代码如下所示：

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

});

var-JsonVar；
$.getJSON（“https://api.myjson.com/bins/lz839，函数（jsonData）{
变量类型={}；
jsonData.forEach（函数（项）{
如果（！types[item.keyword]）{
类型[项目.关键字]=0；
}
类型[item.keyword]++；
});
var关键字scontObject={}；
for（变量类型输入类型）{
var keywordItemsToCount=typeKey.toString（）.split（“，”）；
关键字itemstocount.forEach（函数（itemToCount）{
console.log（itemToCount）；
如果（！KeywordsOnObject.hasOwnProperty（itemToCount））{
关键字ScontObject[itemToCount]=1；
}否则{
关键词ScontObject[itemToCount]++；
}
});
}
for（关键字ScontObject中的var prop）{
$（“ul#menu”）.append（“
”+prop+”+keywordscontobject[prop].toString（）+“
”）；
}
});
您的问题很不清楚。请阅读并理解
我希望每个键和值都在同一个li中，并且值在一个范围内，以便我可以设置样式。
这不是目标吗？我试图将小提琴添加到问题中，但小提琴的代码与问题中的不同，因此我不知道哪一个是相关的。我猜代码是不同的，可以让它在上面运行
jsfiddle
，但这是令人困惑的，谢谢您的更正@liam。我正试图把这个问题归结为最简单的问题，但我还没有做到。非常感谢！这对问题的第二部分或字符串非常有效，但我也想拆分它，这样我就可以计算并列出所有的关键字。如果你能修改它，请稍等片刻，如果你先答对了问题，那么它会让每个人的生活更轻松@east1999这就是你要搜索的@east1999吗？对不起，我更新了小提琴。这是我的错，我的循环被错误地放置了：/check out:这就像一个符咒。我的问题是让for循环正确。我将括号中的所有内容替换为
$（“#menu ul”）.append（
”+typeKey.toString（）+types[typeKey].toString（）+“
”）
-如果我使用jQuery，会更容易。我刚刚注意到你的编辑，我想我知道使用
split（）。仍然是已计数字符串的列表，而不是字符串中的离散项。也许需要先分拆，然后数数？好的，等几分钟，我看一下。：）好的，您可以在keywordArray变量中找到提取的关键字。检查这把小提琴：这就是你要找的吗？谢谢：）很高兴帮助你。我想你可以在这里找到你问题的答案：
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);
  }
});

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

});