Hi fdedeh,
Need your help placing button on ionic grid 4x3 for json object with key/value pairs as follows:
I have a feed (jsonArray, holding json objects) from a REST services as follows:
$jsonArray =[{data1},{data2},{data3},...]
where, json object "data1" holds 12 key/value pairs
data1 ={ "key1":"Yes", "key2": "No", "key3": "Yes", "key4": "No", "AnyKey11": "Yes", "AnyKey22": "No", "Anykey33": "Yes", "AnyKey44": "No", "myKey11": "Yes", "myKey22": "No", "myKey33": "Yes", "myKey44": "No" }
please note that json object holding key and value where key is varying, but the values will always be either be "Yes" or "No"
I would like to place 12 buttons for the jsonObject "data1" (has 12 key/value pairs)on an ionic grid 4x3( four rows and 3 coloumn).
Button text should reflect the "Key's", whereas button color shall be blue for when its value is "Yes" and color red for its value is "No".
Thus 1st button shall be a blue colored button with text as "key1"
2nd button shall be a red colored button with text as "key2"
... ... ... ...
... ... ... ...
... ... ... ...
12th button shall be a red colored button with text as "myKey44"
Please help me fixing my HTML as follows
<span ng-if="value=='Yes'" >
<button id={{$index}} class="button button-royal" >{{key}}</button>
</span>
<span ng-if="value=='No'" >
<button id={{$index+}} class="button button-assertive" >{{key}}</button>
</span>
<span ng-if="value=='Yes'" >
<button id={{$index+1}} class="button button-royal" >{{key[$index+1]}}</button>
</span>
<span ng-if="value=='No'" >
<button id={{$index+1}} class="button button-assertive" >{{key[$index+1]}}</button>
</span>
<span ng-if="value=='Yes'" >
<button id={{$index+2}} class="button button-royal" >{{key[$index+2]}}</button>
</span>
<span ng-if="value=='No'" >
<button id={{$index+2}} class="button button-assertive" >{{key[$index+2]}}</button>
</span>
<span ng-if="value=='Yes'" >
<button id={{$index+3}} class="button button-royal" >{{key[$index+3]}}</button>
</span>
<span ng-if="value=='No'" >
<button id={{$index+3}} class="button button-assertive" >{{key[$index+3]}}</button>
</span>
</div>
</div>
</div>