CODEWITHSUNDEEP
javascriptjson
tinyCoder
tinyCoder

Reputation: 360

Extract specific variables from a mixed string/JSON data

I am using Tagify with a custom AngularJS directive that I built, Tagify mixed input returns the JSON objects of selected tags and text in one single string, for example:

var tagify = new Tagify(myElement, {
    mode: 'mix',
    pattern: /@/,
    whitelist: [{ value: "User Name", code: '$name' }, { value: "Phone Number", code: '$phone' }],
    enforceWhitelist: true,
    dropdown: {
        maxItems: 20,
        classname: "tags-look",
        enabled: 0,
        closeOnSelect: true
    }
});
tagify.on('change', () => console.log(tagify.DOM.input.value))

The user input would be:

Hello User Name ×, the SMS has been sent to your phone Phone Number ×.

This simple example returns:

Hello [[{ value: "User Name", code: '$name' }]], the SMS has been sent to your phone [[{ value: "Phone Number", code: '$phone' }]]. (and the JSON returned is escaped)

What I am doing later is replacing the tags that the user selected (by typing the @ character and selecting them from the dropdown) with my own dynamic variables.

I was able to get a nice result with tagify.DOM.input.textContent as it rendered the following result:

Hello User Name, the SMS has been sent to your phone Phone Number.

However, since the whitelist is translatable and can be in other languages that I can't find and replace easily later, what I need is the code attribute from the JSON whitelist and not the value. The expected result that I couldn't find a way to reach yet is:

Hello $name, the SMS has been sent to your phone $phone.

Thanks.

Upvotes: 5

Views: 894

Answers (1)

Shimon Brandsdorfer
Shimon Brandsdorfer

Reputation: 1723

You can create your custom transform function, to transform it the way you like, you can do something like this.

function transformer(value) {
    return value.replace(/\[\[(.*?)\]\]/g, (arr => {
     let json = JSON.parse(arr);
     return json[0].map(e => e.code).join(', ');
    }))
 }

And then you can call it on change (or rather on/or before submit), like this:

tagify.on('change', (e) => transformer(e.detail.value));

Upvotes: 7

Related Questions