Search jQuery

jQuery Forum

jquery + json generate html buttons with condition

in Getting Started • 8 years ago

Hi all,

My need is to generate buttons with conditions described in json. Help me please, I’m newbie.

Here is my json code (it is valid due to check result at http://www.jsoneditoronline.org/ , but does not work with html code below) :

{
"Caption": "Module caption",
"IconsDirectory": "C://Images/",
"Buttons": [
{
"Conditions": [
{
"ConditionText": "1 == 1",
"ButtonText": "Text1",
"Visible": true,
"Colors": {
"FontColor": "#FFFFFF",
"BGColor": "#00FF00"
},
"Size": {
"Width": 200,
"Height": 50
},
"Icon": {
"FileName": "Smile.png",
"Width": 16,
"Height": 16
},
"Url": {
"UrlAddress": "http://www.google.com",
"OpenNewWindow": true
},
"JavascriptAction": {
"Text": "alert('ok');"
}
},
{
"ConditionText": "2 == 2",
"ButtonText": "Text2",
"Visible": true,
"Colors": {
"FontColor": "#FFFFFF",
"BGColor": "#00FF00"
},
"Size": {
"Width": 200,
"Height": 50
},
"Icon": {
"FileName": "Smile.png",
"Width": 16,
"Height": 16
},
"Url": {
"UrlAddress": "http://www.google.com",
"OpenNewWindow": true
},
"JavascriptAction": {
"Text": "alert('ok');"
}
}
]
}
]
}

html code:

<html>
<head>
<title>SMButtons</title>
[removed][removed]
[removed]
//When document loaded.
$(document).ready(function(){
// Get data from file as JSON
$.getJSON('weekendtask.json', function(data) {
var buttons = data.Buttons;
$.each(buttons, function(key, val)
{
$('<li><input type="button" value="'+ val.ButtonText +'"/></li>').appendTo('#ulObj');
});
});
});
[removed]
</head>
<body>
<br>
<br>
<div>
<ul id='ulObj'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>

I've read I can use this construction:

val.Conditions[0]['Colors'].FontColor

val.Conditions[0].Colors.FontColor

but I can not understand how.

So, the question is - how do I change this line for generating buttons with condition?

$('<li><input type="button" onClick="'+ val.Conditions[0].JavaScriptAction +'" value="'+ val.Conditions[0].ButtonText +'"/></li>').appendTo('#ulObj');

Replies(7)

mandylaz

Re: jquery + json generate html buttons with condition

8 years ago

I would like also to mention here that my other example works, it generates buttons from json without conditions.

json code:

{
"Caption": "Module caption",
"IconsDirectory": "C://Images/",
"Buttons": [
{
"TText": "google",
"JavaScriptAction": "alert('google')"
},
{
"TText": "microsoft",
"JavaScriptAction": "alert('microsoft')"
},
{
"TText": "yahoo",
"JavaScriptAction": "alert('yahoo')"
}
]
}

html code:

<html>
<head>
<title>SMButtons</title>
<script src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
//When document loaded.
$(document).ready(function(){
// Get data from file as JSON
$.getJSON('Module.json', function(data) {
// Set json data from file to variable 'persons'
var buttons = data.Buttons;
var icondir = data.IconsDirectory;
// For each item of variable person append to ul list
$.each(buttons, function(key, val)
{
//$("<li><input type='button' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#aaa');
//$("<li><input type='button' style='"+ val.Style +"' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#aaa');
//$("<li><input type='button' value='"+ val.TText +"'/></li>").appendTo('#bbb');
//style="height: 25px; width: 100px"
//$('<li><input type="button" onClick="'+ val.action +'" value="'+ val.Text +'"/></li>').appendTo('#aaa');
$('<li><input type="button" onClick="'+ val.JavaScriptAction +'" value="'+ val.TText +'"/></li>').appendTo('#ulObj');
});
//var knop = data.Knop;
// For each item of variable person append to ul list
//$.each(buttons, function(key, val)
//{
//$("<li><input type='button' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#aaa');
//$("<li><input type='button' style='"+ val.Style +"' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#bbb');
//style="height: 25px; width: 100px"
//$('<li><input type="button" onClick="'+ val.action +'" value="'+ val.Text +'"/></li>').appendTo('#aaa');
//$('<li><input type="button" onClick="'+ val.action +'" value="'+ val.Text +'"/></li>').appendTo('#aaa');
//});
});
});
</script>
</head>
<body>
<br>
<br>
<div>
<ul id='ulObj'>
<li>1</li>
</ul>
</div>
<br>
<div>
<ul id='aaa'>

</ul>
</div>


<div>
<ul id='bbb'>


</ul>
</div>
</body>
</html>

jakecigar

Re: jquery + json generate html buttons with condition

8 years ago

I hope this gets you started.

var res=""
$.each(data.Buttons, function(key, button){
$.each(button.Conditions,function(key,condition){
// console.log(condition)
res+="<li>"
res+='<input type="button" value="'+ condition.ButtonText +
'" onclick="' + condition.JavascriptAction.Text+
'" style="background-color:'+condition.Colors.BGColor+'; color:'+condition.Colors.FontColor+
'"/>'
res+="<\/li>"
})
})
$(res).appendTo('#ulObj')

JΛ̊KE

mandylaz

Re: jquery + json generate html buttons with condition

8 years ago

jakecigar,

thanks for your reply!

Now it generates two buttons, but the text of buttons is "undefined" and nothing happens on button click. I'm still stuck, could you please help me a little bit more?

json code:

{
"Caption": "Module caption",
"IconsDirectory": "C://Images/",
"Buttons": [
{
"Conditions": [
{
"ConditionText": "1 == 1",
"ButtonText": "Text1",
"Visible": true,
"Colors": {
"FontColor": "#FFFFFF",
"BGColor": "#669933"
},
"BButtonText": {
"TText": "Textt1"
},
"Size": {
"Width": 200,
"Height": 50
},
"Icon": {
"FileName": "Smile.png",
"Width": 16,
"Height": 16
},
"Url": {
"UrlAddress": "http://www.google.com",
"OpenNewWindow": true
},
"JavaScriptAction": {
"Text": "alert('ok');"
}
},
{
"ConditionText": "2 == 2",
"ButtonText": "Text2",
"Visible": true,
"Colors": {
"FontColor": "#0FFFFF",
"BGColor": "#FF9966"
},
"BButtonText": {
"TText": "Textt1"
},
"Size": {
"Width": 200,
"Height": 50
},
"Icon": {
"FileName": "Smile.png",
"Width": 16,
"Height": 16
},
"Url": {
"UrlAddress": "http://www.google.com",
"OpenNewWindow": true
},
"JavaScriptAction": {
"Text": "alert('ok');"
}
}
]
}
]
}

html code:

<html>
<head>
<title>SMButtons</title>
<script src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
//When document loaded.
$(document).ready(function(){
// Get data from file as JSON
$.getJSON('weekendtask.json', function(data) {
//var buttons = data.Buttons;
//$.each(buttons, function(key, val)
//{
//$('<li><input type="button" onClick="'+ val.Conditions[0].JavaScriptAction +'" value="'+ val.Conditions[0].ButtonText +'"/></li>').appendTo('#ulObj');

//$('<li><input type="button" value="'+ val.Conditions[1].BButtonText.TText +'"/></li>').appendTo('#ulObj');

var res=""
$.each(data.Buttons, function(key, button){
$.each(button.Conditions,function(key,condition){
// console.log(condition)
res+="<li>"
res+='<input type="button"' +
//'" value="'+ '"Ttt"' +
'" value="'+ condition.ButtonText +
'" onclick="' + condition.JavascriptAction +
//'" style="background-color:'+condition.Colors.BGColor+' color:'+condition.Colors.FontColor+
'"/>'
res+="<\/li><\/br><\/br>"
})
})
$(res).appendTo('#ulObj')

//});
});
});
</script>
</head>
<body bgcolor="silver">
<br>
<br>
<div>
<ul id='ulObj'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>

jakecigar

Re: jquery + json generate html buttons with condition

8 years ago

var res=""
$.each(data.Buttons, function(key, button){
$.each(button.Conditions,function(key,condition){
// console.log(condition)
res+="<li>"
res+='<input type="button" value="'+ condition.BButtonText.TText +
'" onclick="' + condition.JavaScriptAction.Text+
'" style="background-color:'+condition.Colors.BGColor+'; color:'+condition.Colors.FontColor+
'"/>'
res+="<\/li>"
})
})
$(res).appendTo('#ulObj')