Display div element if specific value exists in JSON object in JavaScript Vue Js

Question

I need to display Div element if specific value exists on JSON object and I have tried using array I could success but I don't know how to do in JSON object. Simply I need to display div if value called "Channel" exists on JSON object.

Below code that I tried but it didn't work

activationTypes: [
{
"activationTypeId": 1,
"name": "SMS"
},
{
"activationTypeId": 2,
"name": "WEB"
},
{
"activationTypeId": 3,
"name": "Channel"
}
]

<div v-show="Object.values(activationTypes).includes('Channel')"> 
<p>test<test>
</div>

there is no "JSON object" ... it's just an array of objects you're dealing with, correcting that thought may help you actually try to solve your own problem ... Object.values(activationTypes) is an array of objects, you need to check if one of those objects has a name property with the value Channel — Jaromanda X
– Jaromanda X, Commented Aug 24, 2020 at 7:21

Baruch Mashasha · Accepted Answer · 2020-08-24 07:33:35Z

4

Simple Check:

activationTypes.some( item => item['name'] === 'Channel' );

Reference:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

edited Aug 24, 2020 at 7:33

answered Aug 24, 2020 at 7:26

Baruch Mashasha

9872 gold badges13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nizantz Over a year ago

you beat me to it by few secs :)

Alon Shlider Over a year ago

@nizantz you messed with the best

Majed Badawi · Accepted Answer · 2020-08-24 07:57:13Z

1

Use .find to search for the element by name:

new Vue({
     el:"#app",
     data(){
          return{
               activationTypes: [
                    {
                    "activationTypeId": 1,
                    "name": "SMS"
                    },
                    {
                    "activationTypeId": 2,
                    "name": "WEB"
                     },
                     {
                     "activationTypeId": 3,
                     "name": "Channel"
                      }
                ]
           }
     }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
     <div v-show="activationTypes.find(e=>e.name=='Channel')"> 
          <p>test</p>
     </div>
</div>

edited Aug 24, 2020 at 7:57

answered Aug 24, 2020 at 7:23

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Collectives™ on Stack Overflow

Display div element if specific value exists in JSON object in JavaScript Vue Js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related