Searching for a value within an array of objects in Typescript/Vue 3. The objects are of an unknown data type

Question

Searching for a value within an array of objects in Typescript/Vue 3. The objects are of an unknown data type

Is there a way to fix this TypeScript error? To provide some background, I am working with the Vue 3 Composition API where I need to use the result to determine if a default option value should be displayed as

<option ... selected v-if="!isMatch">

.

The object is of type 'unknown'.

The error is specifically pointing to the second 'option'.

props:{
    value: {
        required: true,
        type: String,
    },
    options: {
        required: true,
        type: Array,
    },
}
setup(props){
    const isMatch = () => props.options.find(option => {
        return option['code'] === props.value
    })
    return { isMatch }
}

Example 'Options' Data

[
    {
        "code": "CA",
        "name": "Canada"
    },
    {
        "code": "US",
        "name": "United States"
    }
]

javascript typescript vue.js vuejs3 vue-composition-api

Answer 1

Answer №1

After some restructuring, I developed this code snippet following guidance from the Vue Docs. I had to create two interface definitions and include the PropType import.

import { defineComponent, PropType } from 'vue'

interface Option {
    code: String,
    name: String
}

interface Options extends Array<Option>{}

export default defineComponent({
    props: {
        id: {
            required: true,
            type: String,
        },
        title: {
            required: true,
            type: String,
        },
        selections: {
            required: true,
            type: Array as PropType<Options>
        }
        modelValue: {
            required: true,
            type: String,
        },
    },
    setup(props) {
        const isMatch = () =>
            props.selections.some(
                selection => selection['code'] === props.modelValue
            )

        return { isMatch }
    },
})

Answer 2

After some restructuring, I developed this code snippet following guidance from the Vue Docs. I had to create two interface definitions and include the PropType import.

import { defineComponent, PropType } from 'vue'

interface Option {
    code: String,
    name: String
}

interface Options extends Array<Option>{}

export default defineComponent({
    props: {
        id: {
            required: true,
            type: String,
        },
        title: {
            required: true,
            type: String,
        },
        selections: {
            required: true,
            type: Array as PropType<Options>
        }
        modelValue: {
            required: true,
            type: String,
        },
    },
    setup(props) {
        const isMatch = () =>
            props.selections.some(
                selection => selection['code'] === props.modelValue
            )

        return { isMatch }
    },
})

Answer 3

Answer №2

.find() will return a matching object from the array, but if you only need to know if the object exists, consider using .some() instead.

Also, you can simplify the arrow function by using an expression directly without the need for return:

const isMatch = () => props.options.some(option => option['code'] === props.value)

Answer 4

.find() will return a matching object from the array, but if you only need to know if the object exists, consider using .some() instead.

Also, you can simplify the arrow function by using an expression directly without the need for return:

const isMatch = () => props.options.some(option => option['code'] === props.value)

Searching for a value within an array of objects in Typescript/Vue 3. The objects are of an unknown data type

Answer №1

Answer №2

Similar questions

Combining the elements within an array of integers

Options for importing TypeScript in WebStorm

In Typescript, is it correct to say that { [key: string]: any } is identical to { [key: number]: any }?

Issues with jQuery Ajax functionality in Rails application not achieving successful completion

Generating an Array of Meshes Using Objects in THREE.JS and GLTF Format

What is causing it to give me 'undefined' as the result?

LESS: Using variable values in mixin and variable names

Modify the background color of a div by selecting a hex code from a dropdown menu

The close button in Angular 4 is unresponsive until the data finishes loading in the pop-up or table

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

Unable to display objects in the console window debugger for debugging purposes

"Encountering difficulty in retrieving information from $q and integrating it into the

React: Import default export as a string

Typescript: Creating an interface for a nested object "with a required key"

Encountering a "Missing Access" error on the Discord.js API when trying to register my slash commands

Managing spinners in Protractor when they are concealed by a wrapper element

Load media upon the click of an image

Generating progress bar in Javascript while exporting CSV fileCan JavaScript export CSV and

HTML- Any suggestions on how to troubleshoot my sticky navbar not functioning properly?

Install package specifically for a single project