# Decoding event.detail.text from custom element

**URL:** <https://discourse.elm-lang.org/t/decoding-event-detail-text-from-custom-element/4794>\
**Category:** Learn\
**Created:** [December 5, 2019, 11:11pm UTC](https://discourse.elm-lang.org/t/decoding-event-detail-text-from-custom-element/4794 "2019-12-05T23:11:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![limerickelm](https://avatars.discourse-cdn.com/v4/letter/l/50afbb/32.png) [@limerickelm](https://discourse.elm-lang.org/u/limerickelm)\
**Post date:** [December 5, 2019, 11:11pm UTC](https://discourse.elm-lang.org/t/decoding-event-detail-text-from-custom-element/4794/1 "2019-12-05T23:11:46Z")

</div>

Hello Elm community!!! I need your help understanding how to decode object property from js custom event.

I am using my custom html element in elm like this:

“, node “elm-bridge” [attribute “text” “blabla”, on “todoCompleted” sendTodoCompleted] []”

my function sendTodoCompleted looks like this:

sendTodoCompleted =  
(succeed (TodoCompleted “bla”))

and it works … but instead I would like to read actual property in the js event object ,but I cannot figure out how to do this. So far this is what I tried but it does not work:

sendTodoCompleted msg =  
(at [“detail”, “text”] string) msg |\> TodoCompleted

actual object shape in event.detail = {text: “bla”}

I do not understand how do I pass/store the decoded value after decoding it?

Your help will be greatly appreciated! Decoders is the most confusing part for me so far.

Niko

---

<div class="post-metadata">

**Author:** ![bruchmann](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/bruchmann/32/3683_2.png) [@bruchmann](https://discourse.elm-lang.org/u/bruchmann)\
**Post date:** [December 6, 2019, 12:37am UTC](https://discourse.elm-lang.org/t/decoding-event-detail-text-from-custom-element/4794/2 "2019-12-06T00:37:36Z")

</div>

You’ll have to [`map`](https://package.elm-lang.org/packages/elm/json/latest/Json-Decode#map) the decoded field to your message:

```elm
Json.Decode.map TodoCompleted
    (Json.Decode.at ["detail", "text"] Json.Decode.string)

```

---

<div class="post-metadata">

**Author:** ![limerickelm](https://avatars.discourse-cdn.com/v4/letter/l/50afbb/32.png) [@limerickelm](https://discourse.elm-lang.org/u/limerickelm)\
**Post date:** [December 6, 2019, 3:15pm UTC](https://discourse.elm-lang.org/t/decoding-event-detail-text-from-custom-element/4794/3 "2019-12-06T15:15:17Z")

</div>

Thank you Steffen this has worked!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [December 16, 2019, 3:15pm UTC](https://discourse.elm-lang.org/t/decoding-event-detail-text-from-custom-element/4794/4 "2019-12-16T15:15:18Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.