How to add more properties to ItemValue objects of choices and how to access or reference those additional properties into any expression?

[kalpadiptyaroy]

Hi, Surveyjs Team,

Consider this example for understanding my query.

[
    {
        "type": "dropdown",
        "name": "cars",
        "choices": [
            {
                "text": "Jaguar",
                "value": "jag",
                "price": "4500",
                "country": "US"
            },
            {
                "text": "BMW",
                "value": "bmw",
                "price": "10000",
                "country": "IN"
            }
        ]
    },
    {
        "type": "text",
        "name": "car-symbol",
        "defaultValueExpression": "{cars.value}" // Is it possible? if not how to implement it?
    },
    {
        "type": "text",
        "name": "car-price",
        "defaultValueExpression": "{cars.price}" // Is it possible? if not how to implement it?
    },
    {
        "type": "text",
        "name": "car-country",
        "defaultValueExpression": "{cars.country}" // Is it possible? if not how to implement it?
    }
]

Is there any correct way to this in surveyjs as of now, if yes kindly mention that.

Thanks,

[JaneSjs]

Hello @kalpadiptyaroy,
Use the Serializer API and register custom properties for the itemvalue object.

import { Serializer } from "survey-core";

Serializer.addProperties('itemvalue', [
    {name: "price"},
    {name: "country"}
]);

If you use a question name placeholder (e.g., {cars}) in expressions, it will automatically reference a choice's value property.

{
  "type": "text",
  "name": "car-symbol",
  "defaultValueExpression": "{cars}"
}

To access other custom itemvalue attributes, implement a custom function. Consider the following demo: View Plunker.

import { FunctionFactory} from "survey-core";

function getItemValueProp([val, qName, propName]) {
    if (!val || !qName || !propName) return ""; 

    const dropdown = this.survey.getQuestionByName(qName);
    if (!dropdown || !dropdown.selectedItem) return ""; 

    return dropdown.selectedItem[propName] || "";
}
FunctionFactory.Instance.register('getItemValueProp', getItemValueProp);

I hope this example helps. Let me know if you have further questions.

[kalpadiptyaroy]

Thanks Jane.
That's exactly what I want.