How to pass from string to object with javascript?

Question

I have the following code:

    const burger = `<div class="card" data-id="42" data-price="15" data-category="popular">`

i need the following object:

    const obj = { id: 42, price: 15, category: 'popular' }

With this function:

let regex = /(?<name>\w+)="(?<value>\w+)"/g;
let results = burger.matchAll(regex);

for(let result of results) {
  let {name, value} = result.groups;
  let valores = `${name}: ${value}`;
  console.log(valores)
}

I get the following, but it is not what I want

    > "class: card"
    > "id: 42"
    > "price: 15"
    > "category: popular"

Spectric · Accepted Answer · 2021-07-12 01:19:06Z

2

You can make use of a DOMParser to parse the HTML, get the first child and loop through all attributes.

To convert number and boolean strings to their corresponding types, we can make use of the isNaN and simple string comparison.

parseInt() is used to convert the string to a number and JSON.parse() is used to convert the string to a boolean.

const burger = `<div class="card" data-id="42" data-price="15" is-author-spectric="true" data-category="popular"><div class="card-category">Popular</div><div class="card-description"><h2>The best burger in town (15€)</h2></div></div>`;

const parser = new DOMParser().parseFromString(burger, "text/html");
const elem = parser.body.firstChild;
var json = {};
for (var i = 0; i < elem.attributes.length; i++) {
    var attrib = elem.attributes[i];
    json[attrib.name] = !isNaN(attrib.value) ? parseInt(attrib.value) : attrib.value == "true" || attrib.value == "false" ? JSON.parse(attrib.value) : attrib.value;
}

console.log(json);

answered Jul 12, 2021 at 1:19

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hipólito Over a year ago

the following function gives me the following result: Object { class: "card", data-id: 42, data-price: 15, is-author-spectric: true, data-category: "popular" } and I need it to be as follows: { id: 42, price: 15, category: 'popular' }

Spectric Over a year ago

@Hipólito You'll need to rename the attribute names and remove the ones that you don't want shown.

Collectives™ on Stack Overflow

How to pass from string to object with javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related