How to parse JSON data with jQuery / JavaScript? Tamil Programmers
#behindthecode
STEP 1
<div id="id01"></div>
STEP 2
<script>
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i<arr.length; i++) {
out += '<a href="' + arr[i].url + '">' +
arr[i].display + '</a><br>';
}
document.getElementById("id01" ).innerHTML = out;
}
</script>
STEP 3
<script>
myFunction([
{
"display": "HTML Tutorial",
"url": "http://tamilprogrammers.blogspot.com"
},
{
"display": "CSS Tutorial",
"url": "http://tamilprogrammers.blogspot.com"
},
{
"display": "JavaScript Tutorial",
"url": "http://tamilprogrammers.blogspot.com"
},
{
"display": "SQL Tutorial",
"url": "http://tamilprogrammers.blogspot.com"
},
{
"display": "PHP Tutorial",
"url": "http://tamilprogrammers.blogspot.com"
},
{
"display": "XML Tutorial",
"url": "http://tamilprogrammers.blogspot.com"
}
])
</script>
SAMPLE HTML :
<!DOCTYPE html>
<html>
<body>
<div id="id01"></div>
</body>
</html>
<script src="https://ajax.googleapis.c om/ajax/libs/jquery/3.3.1/jque ry.min.js"></script>
<script>
function myFunction(arr)
{
var out;
var print = '<select>';
var i;
for(i = 0; i<arr.length; i++)
{
out = String(arr[i].VB);
var test = out.split(',');
for(var j=0;j<test.length;j++)
{
print += '<option value="">'+test[j]+'</option>' ;
}
}
print += '</select>';
$("#id01").html(print);
}
myFunction([{"VB": ["put", "kannan", "run"], "PRP": [], "RP": [], "CD": ["16/5/18", "1.add", "2.chat", "3.rectent", "4.vslogo", "5.you", "6.include", "7.full", "8.UI"], "TO": ["to"], "VBD": ["worked", "displayed", "attached"], "VBN": [], "NNS": ["designs", "changes", "images", "fonts", "tweets", "corrections"], "VBZ": [], "VBP": [], "NN": ["today", "i", "ip", "address", "line", "bot", "background", "change", "order", "way", "include", "chatbot", "icon", "header", "chatbot", "work", "correction", "chatbot", "process", "nltk", "processor", "code", "testing", "process", "i", "file"], "CC": ["and", "and"], "PRP$": [], "VBG": [], "POS": [], "WDT": [], "MD": [], "DT": ["the", "the"], "JJR": [], "WP": [], "NNP": ["Testing"], "RB": ["successfully"], "EX": [], "IN": ["in", "in", "in", "with", "inside", "below"], "JJ": ["single", "tab", "give", "i", "clear"], "PDT": ["all"]}]);
</script>
EXAMPLE 2
<!DOCTYPE html>
<html>
<body>
<div id="put"></div>
<div id="value"></div>
</body>
</html>
<script src="https://ajax.googleapis. com/ajax/libs/jquery/3.3.1/ jquery.min.js"></script>
<script>
var d = {"VB": ["put", "kannan", "run"], "PRP": [], "RP": [], "CD": ["16/5/18", "1.add", "2.chat", "3.rectent", "4.vslogo", "5.you", "6.include", "7.full", "8.UI"], "TO": ["to"], "VBD": ["worked", "displayed", "attached"], "VBN": [], "NNS": ["designs", "changes", "images", "fonts", "tweets", "corrections"], "VBZ": [], "VBP": [], "NN": ["today", "i", "ip", "address", "line", "bot", "background", "change", "order", "way", "include", "chatbot", "icon", "header", "chatbot", "work", "correction", "chatbot", "process", "nltk", "processor", "code", "testing", "process", "i", "file"], "CC": ["and", "and"], "PRP$": [], "VBG": [], "POS": [], "WDT": [], "MD": [], "DT": ["the", "the"], "JJR": [], "WP": [], "NNP": ["Testing"], "RB": ["successfully"], "EX": [], "IN": ["in", "in", "in", "with", "inside", "below"], "JJ": ["single", "tab", "give", "i", "clear"], "PDT": ["all"]};
var print = '<select id="txtSelect">';
$.each( d, function( key1, value1 ) {
print += '<option value="'+ value1 +'" >' + key1 + '</option>';
//$('#put').append( $('<div></div>').html(key1) );
});
print += '</select>';
$('#put').html(print);
$('#txtSelect').change( function(){
$("#value").html($(this).val() );
});
கருத்துகள்
கருத்துரையிடுக