xenurs xenurs - 10 months ago 55
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

hello this is rcs
will be displayed in my view or if the key is
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">
<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>
<ul class="list" ng-repeat="(key,value) in mention">

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


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


and the controller :

function($scope, $stateParams, $state,sendtoken) {


var mentionstva = userdata.data.mentions.vat.visible;

var mentionsretard = userdata.data.mentions.delay.visible;

var mentionsbank = userdata.data.mentions.bank.visible;

var mentionsperso = userdata.data.mentions.free.visible;

var mentionscga = userdata.data.mentions.cga.visible;

var mentionsrcs = userdata.data.mentions.rcs.visible;

$scope.mention = userdata.data.mentions;

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

$scope.displaymentions = {"display": "none"};


$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(){
$scope.immatriculation = function(){
$scope.addmention = function(){


Answer Source

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>