VUEJS - V-if check JSON object is empty

Question

This is the JSON response we are getting. Missing some very simple VUEJS logic to meet our requirements.

If the JSON object is empty we need to show the DIV accordingly. But, when I try with length function it's not working. Can anyone help to solve this issue?

{
  "moduleInfo": {
    "moduleType": "LONG"
  },
  "FlightElements": {
    "modulenames": {
      "Ele1": "Flight Parts",
      "Ele2": "Flight Wings"
    }
  }
}

<!-- If moduleType is LONG and "Modulesnames" are available -->
<div class="display-container" v-if='moduleType=="LONG" && !FlightElements.modulenames.length'>
  <p>Display Modules</p>
<div>

<!-- If moduleType is LONG and "Modulesnames" is empty -->
<div class="display-container" v-if='moduleType=="LONG" && FlightElements.modulenames.length'>
  <p>Display Empty Modules</p>
<div>

Share your component entirely, or at least all related codes to fetch data and its template. — Raeisi, Sep 28 '21 at 10:19

score 0 · Answer 1 · answered Sep 28 '21 at 09:51

0

Try to use lodash _.isEmpty(value)

<!-- If moduleType is LONG and "Modulesnames" is empty -->
<div class="display-container" v-if='moduleType=="LONG" && _.isEmpty(FlightElements.modulenames)'>
  <p>Display Empty Modules</p>
<div>

answered Sep 28 '21 at 09:51

makbeth

101
3

getting - "ReferenceError: _ is not defined" – WTE Sep 28 '21 at 10:01
you have to add `lodash` to your dependencies, it is a third party library. – mcy Sep 28 '21 at 10:10
2

There's no need to add the `lodash` package. How detecting an empty object is difficult? – Raeisi Sep 28 '21 at 10:22

Nikola Pavicevic · Accepted Answer · 2021-09-28T10:45:42.000

Try to check if object property(object) is empty:

new Vue({
  el: "#demo",
  data() {
    return {
      mod:{
        "moduleInfo": {"moduleType": "LONG"},
        "FlightElements": {
          "modulenames": {"Ele1": "Flight Parts","Ele2": "Flight Wings"}
        }
      },
      mod1:{
        "moduleInfo": {"moduleType": "LONG"},
        "FlightElements": {
          "modulenames": {}
        }
      }
    }
  }
})

Object.entries(objectToCheck).length === 0

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" style="display: flex; gap: 1em;">

  <div style="background: green;">
    <div class="display-container" v-if='mod.moduleInfo.moduleType=="LONG" && Object.entries(mod.FlightElements.modulenames).length !== 0'>
      <p>Display Modules</p>
    </div>
    <div class="display-container" v-if='mod.moduleInfo.moduleType=="LONG" && Object.entries(mod.FlightElements.modulenames).length === 0 '>
      <p>Display Empty Modules</p>
    </div>
  </div>
  
  <div style="background: red;">
    <div class="display-container" v-if='mod1.moduleInfo.moduleType=="LONG" && Object.entries(mod1.FlightElements.modulenames).length !== 0'>
      <p>Display Modules</p>
    </div>
    <div class="display-container" v-if='mod1.moduleInfo.moduleType=="LONG" && Object.entries(mod1.FlightElements.modulenames).length === 0 '>
      <p>Display Empty Modules</p>
    </div>
  </div>
</div>

Sensanaty · Answer 3 · 2021-09-28T22:05:11.873

A few notes.

JSONs in Javascript don't have a length property. Calling json.length will always return undefined. If you had an array of JSONs, however, then you would be able to call .length on it.

const json = { "key": "example" }
const array = [ { "key": "example1" }, { "key": "example2" } ]

console.log(json.length)
console.log(array.length)

// #=> undefined
// #=> 2

If you wanted the length of a JSON via it's keys, you'd have to count how many keys it has. Check this answer for more details on that.

Second, you shouldn't necessarily need lodash as makbeth's comment indicates, you should be able to simply call the modulenames key. It will return false if it has no contents.

Take a JSON like below:

const json = {
  "user": { }
}

If you call json in an if, it will return true. Calling json.user, however, will return false.

if (json.user) {
  console.log("Hello!")
} else {
  console.log("Goodbye!")
}

// #=> Goodbye!

It seems to me, assuming that the code you posted is what's actually being used, that you're simply not calling the correct JSON keys here.

You first need to save the JSON you're getting from the API into a variable, and then you can access those keys properly.

Something like this:

<template>
  <div v-if="data.moduleType === 'LONG' && data.FlightElements.moduleNames">
    <p>Display Modules</p>
  </div>

  <div v-if="data.moduleType === 'LONG' && !data.FlightElements.moduleNames">
    <p>Display Empty Modules</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data = {}
    }
  },
  methods: {
    async fetchData() {
      this.data = callApi();
    }
  }
}
</script>

VUEJS - V-if check JSON object is empty

3 Answers3