# Extracting JSON from HTML using Javascript

**URL:** <https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510>\
**Category:** Ask for Help\
**Created:** [April 12, 2024, 9:00am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510 "2024-04-12T09:00:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ryanb12](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryanb12/32/64617_2.png) [@Ryanb12](https://community.glideapps.com/u/Ryanb12)\
**Post date:** [April 12, 2024, 9:00am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/1 "2024-04-12T09:00:14Z")

</div>

So just as the title says, trying to extract data from Yelp (inspected the search results page to get my HTML/JSON) and parse it out.

The JSON is within the HTML and I’m having a hard time getting my script to work to extract just the JSON. Any pointers are appreciated!

Code below:  
window.function = function (p1) {  
if (!p1) {  
return undefined;  
}  
let html = p1;  
let startMarker = ‘\<script type="application/json"data-hypernova-key="yelpfrontend\_\_56414\_\_yelpfrontend\_\_GondolaSearch\_\_dynamic"data-hypernova-id=“dc346d70-c1bc-4741-b827-4ea0ab1ee84e”\>’;  
let endMarker = ‘–\>’;  
let startIndex = html.indexOf(startMarker) + startMarker.length;  
let endIndex = html.indexOf(endMarker, startIndex);  
if (startIndex !== -1 && endIndex !== -1 && endIndex \> startIndex) {  
let jsonString = html.substring(startIndex, endIndex).trim();  
return jsonString;  
}

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 12, 2024, 9:01am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/2 "2024-04-12T09:01:11Z")

</div>

Can you give us a sample of p1’s value?

---

<div class="post-metadata">

**Author:** ![Ryanb12](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryanb12/32/64617_2.png) [@Ryanb12](https://community.glideapps.com/u/Ryanb12)\
**Post date:** [April 12, 2024, 9:04am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/3 "2024-04-12T09:04:55Z")

</div>

Definitely!  
Attaching 2 screenshots, the amount of information for p1’s value is way too much to copy and paste. The 2 screenshots are of the beginning of the JSON object/end of it. Let me know if there is anything in specific you’d need to see. Thank you!!

 ![Screenshot 2024-04-12 020304](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/1/718d03e8244387c03d50069c01b84f160ce3c84a.png)  
 ![Screenshot 2024-04-12 020329](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a9607406934ba5638654132811edd6af9e693ea6.png)  
’

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 12, 2024, 9:31am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/4 "2024-04-12T09:31:40Z")

</div>

I think you could do this quite effectively without writing any code at all, by using a combination of the Get Webpage Source column and an AI column to extract the JSON.

---

<div class="post-metadata">

**Author:** ![Ryanb12](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryanb12/32/64617_2.png) [@Ryanb12](https://community.glideapps.com/u/Ryanb12)\
**Post date:** [April 12, 2024, 9:43am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/5 "2024-04-12T09:43:30Z")

</div>

I tried that but the page source is too large for AI to handle. I get an error saying I maxed out the context length.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 12, 2024, 9:50am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/6 "2024-04-12T09:50:07Z")

</div>

I see.

Okay, well just looking at your code the first thing I would try is removing that enclosing function.  
So try something like the following:

```auto
if (!p1) {
  return undefined;
}
let html = p1;
let startMarker = ‘<script type="application/json"data-hypernova-key="yelpfrontend __56414__ yelpfrontend __GondolaSearch__ dynamic"data-hypernova-id=“dc346d70-c1bc-4741-b827-4ea0ab1ee84e”>’;
let endMarker = ‘–>’;
let startIndex = html.indexOf(startMarker) + startMarker.length;
let endIndex = html.indexOf(endMarker, startIndex);
if (startIndex !== -1 && endIndex !== -1 && endIndex > startIndex) {
  let jsonString = html.substring(startIndex, endIndex).trim();
  return jsonString;
}

```

---

<div class="post-metadata">

**Author:** ![Ryanb12](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryanb12/32/64617_2.png) [@Ryanb12](https://community.glideapps.com/u/Ryanb12)\
**Post date:** [April 12, 2024, 10:01am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/7 "2024-04-12T10:01:24Z")

</div>

No luck 🫤

---

<div class="post-metadata">

**Author:** ![Ryanb12](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryanb12/32/64617_2.png) [@Ryanb12](https://community.glideapps.com/u/Ryanb12)\
**Post date:** [April 12, 2024, 10:04am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/8 "2024-04-12T10:04:53Z")

</div>

Just got this error:

### Function Error

SyntaxError: Invalid or unexpected token

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 12, 2024, 10:10am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/9 "2024-04-12T10:10:29Z")

</div>

arr, I think when I copy/pasted your code, it wound up with some smart quotes, which would have broken it.

Try this:

```auto
if (!p1) {
  return undefined;
}
let html = p1;
let startMarker = `<script type="application/json"data-hypernova-key="yelpfrontend __56414__ yelpfrontend __GondolaSearch__ dynamic"data-hypernova-id="dc346d70-c1bc-4741-b827-4ea0ab1ee84e">`;
let endMarker = '–>';
let startIndex = html.indexOf(startMarker) + startMarker.length;
let endIndex = html.indexOf(endMarker, startIndex);
if (startIndex !== -1 && endIndex !== -1 && endIndex > startIndex) {
  let jsonString = html.substring(startIndex, endIndex).trim();
  return jsonString;
}

```

---

<div class="post-metadata">

**Author:** ![Ryanb12](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryanb12/32/64617_2.png) [@Ryanb12](https://community.glideapps.com/u/Ryanb12)\
**Post date:** [April 12, 2024, 10:18am UTC](https://community.glideapps.com/t/extracting-json-from-html-using-javascript/72510/10 "2024-04-12T10:18:16Z")

</div>

You’re the man! Thank you!! It worked!!