I’m trying to create a function that would be able to determine the correct origin of an element.
Quick description:
Let’s say you have a webpage that has a lot of dynamic content (presumably coming from a JSON file),
so you’d have a paragraph with a class of description which would contain something like:
“This property is now on sale”.
Let’s pretend that the text is coming from “properties.json”
So, the point of the function would be to pass it the “This property is now on sale” as an argument, and
the function should return the following answer:
“Segment ‘This property is now on sale’ is being loaded from ‘properties.json’”.
I know that you could use the developer’s tools to figure it out, but that’s not the point.
I’ve been trying to figure this one out, but wasn’t able to find any decent way of doing this.
Is this even possible?
I think if it is, it would need to be as a browser extension - unless there’s a setting that exposes an API or something. Or maybe an OS script in eg. Java, Python, etc.
This could easily devour resources unless guardrails are in place.
Hi @silic5494, if you have control over how the content is getting generated you might store the data source with the element when creating it… e.g. just the URL of the source using a data attribute, or the actual data object using a (weak) map:
const sources = new WeakMap()
const createElements = response => response.json().then(data => {
// The data being something like
// [{ "description": "This property is now on sale" }]
data.forEach(item => {
const element = document.createElement('p')
// Version 1: store the source URL directly on the element;
// this only works with strings though
element.dataset.source = response.url
// Version 2: associate the source object with the element
// in a map; this works with arbitrary references
sources.set(element, data)
element.textContent = item.description
element.classList.add('description')
document.body.appendChild(element)
})
})
fetch('./properties.json')
.then(createElements)
// Then, later...
.then(() => {
document.querySelectorAll('.description').forEach(element => {
console.log(element.dataset.source)
console.log(sources.get(element))
})
})
Other than that I also agree that there is no way to find the data source retrospectively.
Well I though of creating a browser extension, but couldn’t find any useful docs in regards how to figure out which assets are being loaded in to the website. I was figuring that if I can get my hands on that, then I could filter out all of the resources that I know wouldn’t contain any text eg. .jpg, .css… and then just loop through all of the remaining files in search for the string.
What he means is that the only way to figure out the origin is to go back through all possible sources and find the string in question. Which is a resource intensive/prohibitive operation depending on your number of sources.
Oh that… Well yeah it makes sense that if a script starts to open up and read all of the files that could contain text, it would probably crash if there were hundreds of sources lol
Right. So basically you’ve asked the following question:
I have a street sign. Which city did it come from?
Well, unless the street sign has the city name painted onto it, the only way to determine the possibilities is to go through a list of every city in the world’s street names, and find which one(s) have a street that matches your sign.