xenurs xenurs - 1 month ago 5
JSON Question

AngularJS: Hide or show object depending on key value of a json array

I'm new in angular, and I have this 2 issues:

I received json data and I want to display different text in my view which depends on the key of my json.

Example: If the key is

rcs
,
hello this is rcs
will be displayed in my view or if the key is
bank
,
hello this is my bank
will be displayed in my view.

And the second issue: I want to display my object only if "visible" == "true".

So I tried to create an object which has the same key as my json data (screenshot) and have the value I want to display. After that I don't know how to manage this. And even less to display my object if the key "visible" == "true".

Right now, I only succeed to display the key of my json data.

This is my json

And here is the view :

<ion-view view-title="Liste des mentions">
<ion-content>
<div class="item item-divider">
<button class="ion-ios-minus-outline" type="button" name="button"></button>
<button style="float:right;"class="ion-arrow-move"type="button" name="button" ng-click="moovelement()"></button>
</div>
<ul class="list" ng-repeat="(key,value) in mention">

<li class="item" ng-style="displaymentions">{{key}}

</li>

</ul>
<button class="ion-ios-plus-outline" type="button" name="button" ng-click="addmention()">Ajouter des mentions</button>

</ion-content>
</ion-view>


and the controller :

.controller('MentionsCtrl',['$scope','$stateParams','$state','sendtoken',
function($scope, $stateParams, $state,sendtoken) {



sendtoken.send(sessionStorage.getItem('token'))
.then(function(userdata){

var mentionstva = userdata.data.mentions.vat.visible;
sessionStorage.setItem('usermentionstva',mentionstva);

var mentionsretard = userdata.data.mentions.delay.visible;
sessionStorage.setItem('usermentionsretard',mentionsretard);


var mentionsbank = userdata.data.mentions.bank.visible;
sessionStorage.setItem('usermentionsbank',mentionsbank);

console.log(mentionsbank);
var mentionsperso = userdata.data.mentions.free.visible;
sessionStorage.setItem('usermentionsperso',mentionsperso);


var mentionscga = userdata.data.mentions.cga.visible;
sessionStorage.setItem('usermentionscga',mentionscga);

var mentionsrcs = userdata.data.mentions.rcs.visible;
sessionStorage.setItem('usermentionsrcs',mentionsrcs);



$scope.mention = userdata.data.mentions;



if(userdata.data.mentions.visible == "false"){


$scope.displaymentions = {"display": "none"};
}
console.log($scope.mention);


});

$scope.jsontab = {
"bank": "Coordonnées bancaires",
"vat": "TVA non applicable",
"delay": "Retard de paiement",
"rcs": "Immatriculation RCS",
"cga": "Centre de gestion agrée",
"free": "Mention personnelle"
};



$scope.retard = function(){
$state.go('app.retard');
};
$scope.immatriculation = function(){
$state.go('app.immatrcs');
};
$scope.addmention = function(){
$state.go('app.addmentions');
};



}])

Answer

You already have an answer but this one I feel is a bit simpler and conforms to the json you already have without requiring you to define anything new in your controller.

<ul class="list" ng-repeat="(key,value) in mention" ng-if="mention[key].visible">
     <li class="item" ng-style="displaymentions">Hello this is my {{key}}</li>
</ul>
Comments