どのように解析するのですか？ jsonのオブジェクト値を特定の入力に変換する

Question

大文字「A」と小文字「a」のすべてのインスタンスを数えようとしています。入力は、コンテンツがユーザーによって入力されるテキストフィールドから取得されます。私は現在、結果をJSONとして出力できましたが、各文字を特定の入力値に指定したいと思います。

現在、スクリプトはアラートに出力されています。しかし、id = "A"のdivの入力ボックスに値として表示される 'A'カウントの値を取得する方法を理解したいと思います。私はまた、今のところ大文字小文字を無視していることを認識していますが、それは別の問題です。これはおそらくjQueryの.each（）の使用ですか？

例

入力：Apple

出力：

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>

：ここ

{"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ですjQueryのなし

Answer 1

を経由して、その値を設定することができます！

答えは文字をカウントし、そのカウントをのキー値のペアとして保存します。それも、ここで

$("#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)); 
 
*/

<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>

Answer 2

：

document.getElementById("A")はあなたにid"A"を持つ要素への参照を与えるだろう、もちろんその中"A"は、例えば（変数や任意の式の実際に結果することができ、 stringBase[i]）。

あなたは要素への参照を持っていたら、あなたはjQueryを使ってtheElement.value = theValue;

を経由して、その値を設定することができます。

$("#A")はあなたにid"A"を持つ要素のためのjQueryオブジェクトを与え、そしてもちろんします"#A"は、変数または任意の式の結果であることができます（たとえば、"#" + stringBase[i]）。

あなたは要素のjQueryオブジェクトを持っていたら、あなたは、単にこれをしなければならないtheObj.val(theValue);

Answer 3

は完全な例である "" 空白を数えます。私はdivも作成します。

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

<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>