# Json from payload to webpage

**URL:** <https://forums.losant.com/t/json-from-payload-to-webpage/5577>\
**Category:** Help\
**Tags:** workflow, cpf\
**Created:** [August 22, 2024, 4:39pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577 "2024-08-22T16:39:31Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tanner\_Williams](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@Tanner\_Williams](https://forums.losant.com/u/Tanner_Williams)\
**Post date:** [August 22, 2024, 4:39pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/1 "2024-08-22T16:39:31Z")

</div>

I am grabbing a table on a workflow and send it to my webpage to be displayed, there are new lines and quotes etc in the text in my table and its causing my page to render weird and the json to be invalid, not sure how to fix this  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/5/535ac80824bade8307687abdb1de506c78f5bcd5.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/d/d4f4cc4e9755daef5f1f8bf66ca82ed0634702a3.png)

```auto
             // Example JSON string
        const jsonString = `{{pageData.table}}`;
        console.log(jsonString);
        // Parse the JSON string
        const data = JSON.parse(jsonString);

```

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/e/edc4b2ef12aeb8b3895ff3a81d8f44fb816c8092.png)

---

<div class="post-metadata">

**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\
**Post date:** [August 22, 2024, 4:44pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/2 "2024-08-22T16:44:41Z")

</div>

You probably need to use triple curly braces. By default, Handlebars [escapes HTML characters](https://handlebarsjs.com/guide/#html-escaping).

In your case, you’ll need to use triple curly braces in both spots:

```auto
{
  "table": "{{{tableEncoded}}}"
}

```

```auto
const jsonString = `{{{pageData.table}}}`;

```

---

<div class="post-metadata">

**Author:** ![Tanner\_Williams](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@Tanner\_Williams](https://forums.losant.com/u/Tanner_Williams)\
**Post date:** [August 22, 2024, 4:47pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/3 "2024-08-22T16:47:05Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/9/9c4d0c1eeb39a5ddbf46eed64321fed5b23b524e.png)

---

<div class="post-metadata">

**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\
**Post date:** [August 22, 2024, 4:50pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/4 "2024-08-22T16:50:46Z")

</div>

```auto
{
  "table": "{{{tableEncoded}}}"
}

```

This results in an extra set of quotes. Try removing the surrounding quotes:

```auto
{
  "table": {{{tableEncoded}}}
}

```

In reality, you can simplify this to just:

```auto
const jsonString = '{{{jsonEncode pageData.table}}}';

```

You don’t need to decode it in the workflow first. You can decode it with the helper.

---

<div class="post-metadata">

**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\
**Post date:** [August 22, 2024, 4:56pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/5 "2024-08-22T16:56:41Z")

</div>

It can be simplified even further since you’re immediately parsing the string back to an object:

```auto
const table = {{{jsonEncode pageData.table}}};

```

That results in a perfectly valid object - no need to parse it from a string.

---

<div class="post-metadata">

**Author:** ![Tanner\_Williams](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@Tanner\_Williams](https://forums.losant.com/u/Tanner_Williams)\
**Post date:** [August 22, 2024, 4:57pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/6 "2024-08-22T16:57:16Z")

</div>

> [@Brandon\_Cannaday](#):
>
> ```auto
> const jsonString = '{{{jsonEncode pageData.table}}}';
> 
> ```

![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/6/6dfd60272bb74309028441169ea98568d760a4ca.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/8/8d4a39903a573c3e629ea5bf7f14ccddd198ad5a.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/f/f420cd0773fabc2cab956af1d251ecaead82cb2d.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/8/8a8bb916c88bb7853cbdd00c9474837889b7a4f7.png)

---

<div class="post-metadata">

**Author:** ![Tanner\_Williams](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@Tanner\_Williams](https://forums.losant.com/u/Tanner_Williams)\
**Post date:** [August 22, 2024, 4:59pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/7 "2024-08-22T16:59:11Z")

</div>

got it thanks!

page html/script

```auto
             // Example JSON string
        const table = {{{jsonEncode pageData.table}}};

        console.log(table);

```

workflow endpoint reply node

```auto
{
"table": {{table.items}}
}

```

---

<div class="post-metadata">

**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\
**Post date:** [August 22, 2024, 5:06pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/8 "2024-08-22T17:06:52Z")

</div>

```auto
{
  "table": {{table.items}}
}

```

This does not result in valid JSON, so not sure how it’s working. Is `table.items` the array of rows directly from the Table: Get Node?

I would think you’d have to use:

```auto
{
  "table": {{{jsonEncode table.items}}}
}

```

---

<div class="post-metadata">

**Author:** ![Tanner\_Williams](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@Tanner\_Williams](https://forums.losant.com/u/Tanner_Williams)\
**Post date:** [August 22, 2024, 5:19pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/9 "2024-08-22T17:19:00Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/f/fe11ad21bd583790fcb1d4b3539d5c048b1cb5e8.png)  
yes its the rows from the table

---

<div class="post-metadata">

**Author:** ![Tanner\_Williams](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@Tanner\_Williams](https://forums.losant.com/u/Tanner_Williams)\
**Post date:** [August 22, 2024, 5:19pm UTC](https://forums.losant.com/t/json-from-payload-to-webpage/5577/10 "2024-08-22T17:19:47Z")

</div>

not sure if it is a janky solution but it does seem to be working