如何解析？ json对象值转换为特定输入

Question

我正在尝试计算大写字母'A'和小写'a'的每个实例，依此类推字母和其他字符。输入来自文本字段，其内容由用户填充。我目前能够将结果输出为JSON，但我想将每个字母指定为特定输入的值。

我的脚本当前正在输出警报。但是我想知道如何获得'A'计数的值，以便在我的div的输入框中显示为id =“A”的值。我也意识到它现在忽略了大写与小写，但这是另一个问题。这可能是一个jQuery .each（）使用吗？

示例

输入：Apple

输出：

{"A":0,"a":2,"B":0,"b":0,"C":0,"c":2,"D":0,"d":0,"E":0,"e":1,"F":0,"f":0,"G":0,"g":0,"H":0,"h":0,"I":0,"i":5,"J":0,"j":0,"K":0,"k":1,"L":0,"l":5,"M":0,"m":0,"N":0,"n":0,"O":0,"o":0,"P":0,"p":1,"Q":0,"q":0,"R":0,"r":2,"S":0,"s":3,"T":0,"t":1,"U":0,"u":1,"V":0,"v":2,"W":0,"w":1,"X":0,"x":0,"Z":0,"z":0}

这是我目前的HTML：

var stringBase = ['A', 'a', 'B', 'b', 'C', 'c', 'D', 'd', 'E', 'e', 'F', 'f', 'G', 'g', 'H', 'h', 'I', 'i', 'J', 'j', 'K', 'k', 'L', 'l', 'M', 'm', 'N', 'n', 'O', 'o', 'P', 'p', 'Q', 'q', 'R', 'r', 'S', 's', 'T', 't', 'U', 'u', 'V', 'v', 'W', 'w', 'X', 'x', 'Z', 'z'];
var countObject = {};

$("#submit").click(function() {
  var exampleString = 'i will practice survival skills';

  function characterCount(word, character) {
    var count = 0;
    for (var i = 0; i < word.length; i++) {
      if (word[i] === character) {
        count++;
      }
    }
    return count;
  }
  for (var i = 0, l = stringBase.length; i < l; i++) {
    var currentChar = stringBase[i];
    countObject[currentChar] = characterCount(exampleString, currentChar);
  }
  var result = JSON.stringify(countObject)
  alert(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-1">
  <p class="font-letter">A</p>
  <input id="A" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">a</p>
  <input id="a" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">B</p>
  <input id="B" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">b</p>
  <input id="b" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">C</p>
  <input id="C" class="font-input"></input>
</div>

<textarea class="form-control" rows="20" id="copyInput"></textarea>

<button class="btn btn-primary" id="submit">Submit</button>

Answer 1

你只需要这样做！

答案只计算字符并将其计数存储为键值对。它甚至算上空白＆＃34; ＆＃34;

＆＃13;

＆＃13;

$("#submit").click(function() {
  var countObject = {};
  var exampleString = $('#copyInput').val();
   
  // for counting characters
  for(var i=0;i<exampleString.length;i++){
      if(!countObject[exampleString[i]]){
        countObject[exampleString[i]] = 1
      }
      else{
      countObject[exampleString[i]] = countObject[exampleString[i]]+1
      }
  }

  // for displaying char count in HTML
  for (var key in countObject){
      if (countObject.hasOwnProperty(key)) {
           if(document.getElementById(key)){
              document.getElementById(key).value = countObject[key];
           }
      }
  }
})



//for sorting; Not needed for your case
/*
const orderedCharCount = {};
Object.keys(countObject).sort().forEach(function(key) {
  orderedCharCount[key] = countObject[key];
});

console.log(JSON.stringify(orderedCharCount));
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" rows="3" id="copyInput"></textarea>

<button class="btn btn-primary" id="submit">Submit</button>
<div class="col-lg-1">
  <p class="font-letter">A</p>
  <input id="A" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">a</p>
  <input id="a" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">B</p>
  <input id="B" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">b</p>
  <input id="b" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">C</p>
  <input id="C" class="font-input"></input>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一个完整的例子。我也创造了div。

＆＃13;

＆＃13;

var countObject = {}
for (var i = 65; i <= 90; i++) {
  var letter = String.fromCharCode(i);
  countObject[letter] = 0;
  countObject[letter.toLowerCase()] = 0;
}

$(function() {
  var $container = $("#container");
  $.each(countObject, function(letter, value) {
    $container.append('<div class="col-lg-1"><p class="font-letter">' + letter + '</p><input id="' + letter + '" class="font-input"></input></div>')
      .append('<div class="col-lg-1"><p class="font-letter">' + letter.toLowerCase() + '</p><input id="' + letter.toLowerCase() + '" class="font-input" /></div>');
  });

  $("#countLetters").on("submit", function(e) {
    e.preventDefault();
    $.each(countObject, function(letter, value) {
      countObject[letter] = 0;
      countObject[letter.toLowerCase()] = 0;
    });
    var exampleString = $.trim($("copyInput").val()) || 'I will practice survival skills',
      unknown = 0;
    $.each(exampleString.split(""), function(_,char) {
      if (countObject[char]!=undefined && char !=" ") {
        countObject[char]++;
        $("#" + char).val(countObject[char]);
      } else {
        unknown++;
        $("#unknown").val(unknown);
      }
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="countLetters">
  <textarea class="form-control" rows="20" id="copyInput"></textarea>
<br/>
  <button class="btn btn-primary" id="submit">Submit</button>
</form>
<div id="container"></div>
<div class="col-lg-1">
  <p class="font-letter">?</p><input id="unknown" class="font-input" /></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

没有jQuery：

document.getElementById("A")会为您提供id "A"元素的引用，当然"A"中的stringBase[i]可以是变量，或者实际上是{任何表达式（例如，theElement.value = theValue;）。

获得元素引用后，可以通过$("#A")

设置其值

使用jQuery：

id将为"A" "#A"的元素提供一个jQuery对象，当然"#" + stringBase[i]中的theObj.val(theValue);可以是变量或任何结果表达式（例如，<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-fixed-top"> <li><a href="#home"> <br>BLINK</a></li> <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li> <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li> <li><a href="#about"><br>ABOUT US</a></li> </ul> </div> </div> </div> ）。

获得元素的jQuery对象后，可以通过{{1}}

设置其值