The issue of finding a nested object key using dot notation in Vue JS with lodash is resulting in

Question

The issue of finding a nested object key using dot notation in Vue JS with lodash is resulting in

I am facing an issue where I am unable to retrieve a value for a nested object key from the eligibility array. The value is coming out as undefined and I need help in figuring out what mistake I am making.

Here is the given array:

const eligibilityCriteria = [
  { field: 'loan.amount', operator: '>=', value: 1000 },
  { field: 'loan.term', operator: '>=', value: 1 },
  { field: 'applicant.birthday', operator: '>=', value: 40 },
  { field: 'applicant.isHomeowner', operator: '==', value: false }
]

The objective is to extract the value for loan.amount from a nested object:

The nested object available is (retrieved from the store)

application: {
  meta: {
    brand: '',
    version: '',
    affiliate: '',
    affiliate_full: '',
    campaign: '',
    client_hostname: '',
    client_href: '',
    client_origin: '',
    client_useragent: '',
    client_ip: '127.0.0.1',
    icicle_hash: ''
  },
  loan: {
    amount: 500,
    term: null,
    purpose: null
  }
}

The current function looks like this:

checkEligibility () {
  const eligibilityCriteria = [
    { field: 'loan.amount', operator: '>=', value: 1000 },
    { field: 'loan.term', operator: '>=', value: 1 },
    { field: 'applicant.birthday', operator: '>=', value: 40 },
    { field: 'applicant.isHomeowner', operator: '==', value: false }
  ]

  for (const [index, offer] of this.datasets.offers.entries()) {
    const eligibility = eligibilityCriteria

    if (eligibility) {
      for (const [ci, criteria] of eligibility.entries()) {

        // Issue: Unable to fetch the value, returns undefined
        const field = _.findKey(this.$store.state.application.application, criteria.field)
      }
    }
  }
}

Can you point out what I might be overlooking?

javascript vue.js lodash

Answer 1

Answer №1

It seems like there may be some confusion regarding the functionality of _.findKey(). You can read more about what it does here.

To clarify, this method is similar to _.find but instead of returning the element itself, it returns the key of the first element for which the predicate function returns a truthy value.

Please refer to Example 2 in the code snippet below for better understanding.

If you need to access the value from an object at a specific path, consider using _.property() as shown in Example 2.

const eligibilityCriteria = [
  { field: 'loan.amount', operator: '>=', value: 1000 },
  { field: 'loan.term', operator: '>=', value: 1 },
]

const application = {
  loan: {
    amount: 500,
    term: 2,
    amount2: 0,
  }
}

// example 1
// outputs "loan"
console.log(_.findKey(application, "amount"))     
// outputs undefined - there is no key in application object that has property chain "loan.amount"
console.log(_.findKey(application, "loan.amount"))
//  outputs undefined - "amount2" key is there but the value is falsy
console.log(_.findKey(application, "amount2"))     

// example 2
for (const [ci, criteria] of eligibilityCriteria.entries()) {
  console.log(criteria.field, _.property(criteria.field)(application))
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f53505b5e4c577f0b110e08110d0e">[email protected]</a>/lodash.min.js"></script>

Answer 2

It seems like there may be some confusion regarding the functionality of _.findKey(). You can read more about what it does here.

To clarify, this method is similar to _.find but instead of returning the element itself, it returns the key of the first element for which the predicate function returns a truthy value.

Please refer to Example 2 in the code snippet below for better understanding.

If you need to access the value from an object at a specific path, consider using _.property() as shown in Example 2.

const eligibilityCriteria = [
  { field: 'loan.amount', operator: '>=', value: 1000 },
  { field: 'loan.term', operator: '>=', value: 1 },
]

const application = {
  loan: {
    amount: 500,
    term: 2,
    amount2: 0,
  }
}

// example 1
// outputs "loan"
console.log(_.findKey(application, "amount"))     
// outputs undefined - there is no key in application object that has property chain "loan.amount"
console.log(_.findKey(application, "loan.amount"))
//  outputs undefined - "amount2" key is there but the value is falsy
console.log(_.findKey(application, "amount2"))     

// example 2
for (const [ci, criteria] of eligibilityCriteria.entries()) {
  console.log(criteria.field, _.property(criteria.field)(application))
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f53505b5e4c577f0b110e08110d0e">[email protected]</a>/lodash.min.js"></script>

The issue of finding a nested object key using dot notation in Vue JS with lodash is resulting in

Answer №1

Similar questions

The native V8 syntax exclusive in Chrome

Ways to retrieve the identifier of the uploaded document in GridFs for linking with another model

Node.js Error: The object does not have the specified method

The feature to dynamically insert additional fields includes two dropdown menus (one for selecting category and one for product) and an input box for entering a price

TS does not recognize the term "Response"

Transform a nested array of objects into a distinct set of objects based on the data in JavaScript or TypeScript

Setting a specific time for a div element with opacity: A step-by-step guide

mongoose populate method does not return the expected results

What is the best approach for migrating event bus functionality to Vuex store?

Vue.js Multiselect issue

Having trouble with querySelector or getElementById not functioning properly?

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

What are some effective strategies for resolving the persistent issue of Visual Studio Code warnings, MDN Reference difficulties, and other challenges?

Sending a picture through AJAX using the camera feature of p5.js

Dynamically add the <script> tag to the HTML document

The swap feature in drag-and-drop does not have a defined function

Transmit a PDF byte array from JavaScript to PHP using Ajax, then utilize the PHP file to send an email

Retrieving intricate JSON data from a specific web address

Utilizing AngularJS filter method to populate data

What could be the reason for Sequelize to completely replace the record when updating in a put request?