Check if the content key Json exists by implementing Vue

Can anyone help me with checking the existence of "novalue"? For instance:

{
    name: "maria",
    city_id: "novalue"
    ....
}

What would be the best way to do this in Vue? Should I use <div v-if="condition"> or a function?

Answer №1

If you are interested in utilizing ES7 features:

const checkKey = (obj, key ) => Object.keys(obj).includes(key);

Here is an example of how it can be implemented:

const myObject = {name: 'John', age: 30};

const hasName = checkKey(myObject, 'name');
const hasGender = checkKey(myObject, 'gender');

console.log(hasName, hasGender); // true, false

For Vue.js users:

Component:

{
    methods: {
        checkKey(obj, key ) {
            return Object.keys(obj).includes(key);
        }
    },
    computed: {
        hasName() {
            return this.checkKey(this.someData, 'name');
        }
    }
}

Template:

<div v-if="hasName"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery Cookie is failing to be set with every click as expected

I am currently working on a layout switcher feature. When a user clicks on a specific div with the class name display, it triggers the toggling of another class called display-grid for visual enhancements. This functionality also involves switching classe ...

Incorporating FaceBook into a PhoneGap Application

Currently, I am working on integrating Facebook into my phonegap/cordova application. To guide me through the process, I am using the resources provided in this link: https://github.com/davejohnson/phonegap-plugin-facebook-connect/ Even though I have bee ...

Displaying a Vue component inside a Laravel view for seamless integration

Exploring Vue and Laravel for the first time as part of my testing journey with these frameworks. I'm experimenting with loading a Vue Component using an array. I am considering passing the data to the Laravel view via props in the Vue Component, but ...

Ways to modify the appearance of the button within ion-calendar

Looking to customize the styling of ion-calendar classes Attempting to add styles to the ion-calendar-month class, but not seeing any changes take effect. ...

Understanding how to properly handle the data sent by an ajax request in a NodeJS server

I currently have an array called passedWord = ['a', 'bbb']. I am then making an AJAX request to send this array to a Node.js server. Upon receiving the array on the server, Body Parser returns the following object: { name: 'abc&ap ...

What could be causing the repetition of the same cookie in my request header when using jQuery ajax?

Stuck in a dilemma for hours now, seeking assistance or suggestions from anyone who can help me out. To sum it up, I have an asp.net web api application where I am trying to fetch data from a web api and populate multiple dropdown lists on a page using jQ ...

What is the best way to remove uncategorized posts from WordPress for good?

In my WordPress site, I am attempting to delete the uncategorized category permanently. After doing some research, it seems like there may not be a straightforward solution for this issue. However, in my vue.js project where I am utilizing the wp api and ...

What is the best way to troubleshoot an unresponsive button element to determine the listeners it has?

In a previous situation, I encountered an issue with the event modifier of a nested b-input not working as expected. To resolve this, I had to add .native because I was interacting with a component: b-dropdown(text="Actions") b-drop ...

Unable to successfully transfer a document

I am looking to upload a file onto my server. Here is what I have attempted: <input (change)="uploadImage($event.target)" hidden accept="image/*" #uploadProfileImage type="file"> uploadImage(event) { const profileImage = event.files.item(0); t ...

Guide on Sending a POST Request via HTTPS in Websites

I am developing a browser extension for Chrome that requires sending a post request to a server using standard HTTP. However, this is causing a mixed content error when I'm on a website that uses HTTPS, and the browser refuses to process my request. ...

Mapping an array within an array and then pushing the result

I am facing a challenge with an empty array that I have: items: [ { item:null, category_id: null, } ] Can anyone help me figure out how to populate this empty array with the data? Here is an example of the data I have: ...

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

What is the best method to extract the URL from an iframe div element using jQuery or JavaScript?

I have a dynamic way of getting my URL source, as shown in the code below. Is it possible to retrieve the URL from within the gettingiframe div, which is located inside an iframe? Below is the code snippet: <div id="gettingiframe"> <iframe sr ...

Having difficulty extracting only names from the database with mongoose

My goal is to retrieve the value of all the name keys stored in my database. Each document in the database has only one key, which is the "name" key. Below is the code snippet that I need assistance with: user.find({}, 'name', function(err, user ...

Tips for limiting the frequency of Angular provider loading instances

I have created a provider (I tried with a controller as well, but got the same results). Here is my code: .provider('socketio', function() { this.socket = io.connect("//localhost); console.log("LISTENING..."); this.$get = function() ...

Interacting with PHP variables in JSON format

I've recently started using JSON to exchange data between pages, but I am facing a challenge that I can't seem to solve. Essentially, my issue lies in one page where I am utilizing jquery's getJSON method to retrieve JSON data from another ...

Angular mat-select is having difficulty displaying options correctly on mobile devices or devices with narrow widths

In my Angular project, I've encountered an issue with mat-select when viewing options on mobile or low-resolution screens. While the options are still displayed, the text is mysteriously missing. I attempted to set the max width of the mat-option, but ...

Exploring how to read class decorator files in a Node.js environment

I've developed a custom class decorator that extracts permissions for an Angular component. decorator.ts function extractPermissions(obj: { [key: 'read' | 'write' | 'update' | 'delete']: string }[]) { re ...

Using the npm package in JavaScript results in a return value of 1

Recently, I have been working on turning this into an npm package: Test.tsx: import React from "react"; export default class Test extends React.Component { public render() { return ( <h1> Hallo & ...

Changing the color variable of an object using an onClick function in JavaScript

I'm currently working on a simple game where users can draw using the keys W, A, S, and D. If you want to take a look at the progress I've made so far, here is a JSFiddle link. There's a collision function in the code that I no longer need, ...