Convert HTML element to a JSON object

Question

Convert HTML element to a JSON object

Here is an example of an HTML element:

<div class='myparent'>
    <div>
        <div class="pdp-product-price">
            <span> 650 rupees</span>
            <div class="origin-block">
               <span> 1,500 rupees</span>
               <span>-57%</span>
            </div>
        </div>
    </div>
</div>

I am looking to generate a JSON representation of the 'myparent' div.

{
    "div": {
        "div": {
            "div": {
                "span": {},
                "div": {
                    "span": {},
                    "span": {}
                }
            }
        }
     }
}

Do you know if it's possible to achieve this using JavaScript?

javascript json

Answer 1

Answer №1

To access the subtree, utilize the children property of the HTMLElement.

Next, recursively iterate over the parent to retrieve the subtree.

Note: Avoid assigning multiple values with the same key; instead, use an index when assigning a subtree like so:

  "div": {
     "span_1": {},
     "span_2": {},
  }

Check out the snippet below for further insight:

const parent = document.getElementById('parent')

const tree = {};


const getTree = (elem) =>{
   const subtree = {};
   for(let child of elem.children){
       subtree[child.tagName.toLowerCase()] = getTree(child)
   }
   return subtree;
}

tree[parent.tagName.toLowerCase()] = getTree(parent);

console.log(tree);

<div id="parent" class='myparent'>
  <div>
    <div class="pdp-product-price">
      <span> 650 rupees</span>
      <div class="origin-block">
        <span> 1,500 rupees</span>
        <span>-57%</span>
      </div>
    </div>
  </div>
</div>

Answer 2

To access the subtree, utilize the children property of the HTMLElement.

Next, recursively iterate over the parent to retrieve the subtree.

Note: Avoid assigning multiple values with the same key; instead, use an index when assigning a subtree like so:

  "div": {
     "span_1": {},
     "span_2": {},
  }

Check out the snippet below for further insight:

const parent = document.getElementById('parent')

const tree = {};


const getTree = (elem) =>{
   const subtree = {};
   for(let child of elem.children){
       subtree[child.tagName.toLowerCase()] = getTree(child)
   }
   return subtree;
}

tree[parent.tagName.toLowerCase()] = getTree(parent);

console.log(tree);

<div id="parent" class='myparent'>
  <div>
    <div class="pdp-product-price">
      <span> 650 rupees</span>
      <div class="origin-block">
        <span> 1,500 rupees</span>
        <span>-57%</span>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

A recursive function is utilized to construct the json data in a way that prevents any potential issues with duplicate keys. To achieve this, a unique identifier :n is appended to each key, where n represents the index of the element.

function htmlToObject(targetElement) {
  return Array
    .from(targetElement.children)
    .reduce((acc, cur, i) => {
      acc[`${cur.tagName}:${i}`.toLowerCase()] = htmlToObject(cur);
      return acc;
    }, {});
}

const startElement = document.getElementsByClassName("myparent")[0];

const res = {
  [startElement.tagName.toLowerCase()]: htmlToObject(startElement)
};

console.log(res);

<div class='myparent'>
  <div>
    <div class="pdp-product-price">
      <span> 650 rupees</span>
      <div class="origin-block">
        <span> 1,500 rupees</span>
        <span>-57%</span>
      </div>
    </div>
  </div>
</div>

Answer 4

A recursive function is utilized to construct the json data in a way that prevents any potential issues with duplicate keys. To achieve this, a unique identifier :n is appended to each key, where n represents the index of the element.

function htmlToObject(targetElement) {
  return Array
    .from(targetElement.children)
    .reduce((acc, cur, i) => {
      acc[`${cur.tagName}:${i}`.toLowerCase()] = htmlToObject(cur);
      return acc;
    }, {});
}

const startElement = document.getElementsByClassName("myparent")[0];

const res = {
  [startElement.tagName.toLowerCase()]: htmlToObject(startElement)
};

console.log(res);

<div class='myparent'>
  <div>
    <div class="pdp-product-price">
      <span> 650 rupees</span>
      <div class="origin-block">
        <span> 1,500 rupees</span>
        <span>-57%</span>
      </div>
    </div>
  </div>
</div>

Convert HTML element to a JSON object

Answer №1

Answer №2

Similar questions

Tips to prevent the return of undefined when a condition is not satisfied

Building an OData WebAPI in C# to Retrieve a Collection of Items through a POST

Display all y-axis values in the tooltip using HighCharts

"Encountering a 404 error on newly published content, post build phase, with the integration of Next

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

Restarting an Angular app is necessary once its HTML has been updated

Warning: Attempting to modify a property that is not defined - 'action'

The beauty of crafting intricate forms with Angular's reactive nested

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

Paper.js - generate a collection of movable shapes

Baconjs exclusively retrieves the final debounce value

The node server is experiencing difficulties connecting to the mysql database, resulting in a timed out connection error at Connection._handleConnectTimeout

Is there a way to attach a model to an Angular directive?

Tips for utilizing the Toggle Slider JS functionality

group items into ranges based on property of objects

Error encountered when attempting to retrieve token from firebase for messaging

Performing calculations while transferring information via Mongoose to the MongoDb database

Utilize the Tab key in Textarea fields to insert a tab character ( ) instead of navigating to the

Implementing setInterval() leads to the dynamic alteration of images

display the information stored within the sports attribute using React