Extract data from DOM, easily. Useful for back-end generated contents and SEO-friendly rich apps.
npm install xtract
- This works on browser, not node.js. But if you use jsdom, you can.
- Requires jQuery.
SEO is the main problem of modern web. And we have problems with passing the data from HTML to JavaScript. Your back-end generated data is need to be mapped to JavaScript and Xtract helps you to do that.
<p id="profile">
My name is <span data-x="user.name">Fatih</span>,
and I'm from <span data-x="user.location">Istanbul</span>.
</p>
You can simply extract data now just calling:
xtract($("#profile")).$model
This will generate following object:
{
user: "Fatih",
location: "Istanbul"
}
<p id="profile">
My name is <span data-x="user.name.firstname">Fatih</span>
<span data-x="user.name.lastname">Akın</span>,
and I'm from <span data-x="user.location.city">Istanbul</span>,
<span data-x="user.location.country.name">Turkey
(<span data-x="user.location.country.code">TR</span>)</span>.
</p>
xtract($("#profile")).$model
This will generate following object:
{
user: {
name: {
firstname: "Fatih",
lastname: "Akın"
},
location: {
city: "Istanbul",
country: {
name: "Turkey",
code: "TR"
}
}
}
}
You can use $this
in data-x
attribute to reach more values.
<p id="profile">
<img src="my-profile-picture.jpg" data-x="user.image: $this.attr('src')">
My name is <span data-x="user.name">Fatih</span>,
and I'm from <span data-x="user.location">Istanbul</span>.
</p>
xtract($("#profile")).$model
This will map the src
tag to the user.image
:
{
user: "Fatih",
location: "Istanbul",
image: "my-profile-picture.jpg"
}
MIT.