Search code examples
javascripttampermonkey

Can't fix my script to log the way I need it

So this is really getting on my nerves. I needed to explain this a bit better so here it is. I'm trying to make my script log in google's console a specific way. I've got some images to help explain.. Let's hop on in.

So first, this is how it's currently logging.. Which is good so far. I'm happy with this. It's not one big array, nice and neat. Image below: (https://i.gyazo.com/81fc8d76b34a81f4fff7fc23e94f1bf1.png)

So this is the last log emitted(You can see in the image above.) It's just edited to the way I need it to log: [[346,453],[346,452],[346,452],[346,453],[346,453],[347,453],[347,453],[347,454],[348,454],[349,454],[350,454],[351,454],[352,454],[353,454],[354,454],[354,453],[355,452],[355,453]]

So I'm trying to make all the logs send just like that.^^ Replacing the spaces between each pair with a comma, and adding "[" and "]" to each pair.

So how I would like it to log: (Really helps) (https://i.gyazo.com/af179df0b2ce93f018809f6921bce59a.png)

My script: 

xhr=new XMLHttpRequest();

xhr.open("GET", "http://myurl.com/someURLWITH.svg");

xhr.addEventListener("load", function() {
const xmlDoc = new DOMParser().parseFromString(
this.responseText.trim(),
"image/svg+xml"
);

const polylines = Array.from(xmlDoc.getElementsByTagName('polyline'));

var Lines = (polylines.map( pl => pl.getAttribute('points').split(' ').map(
pair => pair.split(',').map(x=>+x),

console.log("[" + pl.getAttribute('points') + "]")
)
));
});
xhr.send();

Keep in mind!!! I don't want it to be one big array!!!! The way it logs each one separately is perfect.. I just need to change the way it logs each one.

So in my code you can see console.log("[" + pl.getAttribute('points') + "]") I've tried to making it like this console.log("[" + pl.getAttribute("[" + 'points' + "]") + "]") really praying this would do the trick but I was wrong. Like always.

So yeah, simply instead of it logging like this [346,453 346,452 346,452 346,453 346,453 347,453 347,453 347,454 348,454 349,454 350,454 351,454 352,454 353,454 354,454 354,453 355,452 355,453] ... I would like it to log just like this [[346,453],[346,452],[346,452],[346,453],[346,453],[347,453],[347,453],[347,454],[348,454],[349,454],[350,454],[351,454],[352,454],[353,454],[354,454],[354,453],[355,452],[355,453]] Thank you.

Solution

  • Your code was almost there, but what you were logging to the console was ridiculous, since it was just the points attribute, unmodified

    So, something like this

    const polylines = Array.from(xmlDoc.getElementsByTagName('polyline'));
const Lines = polylines.map(pl => pl.getAttribute('points').split(' ').map(pair => pair.split(',').map(Number)));

Lines.forEach(line => console.log(JSON.stringify(line)));

    Or, given that the second argument to Array.from is a map function, you can further simplify the code to

    const Lines = Array.from(xmlDoc.getElementsByTagName('polyline'), pl => pl.getAttribute('points').split(' ').map(pair => pair.split(',').map(Number)));

Lines.forEach(line => console.log(JSON.stringify(line)));

    Note, the console.log is done AFTER the processing

    as for the comment

    Lines.forEach(line => {
    // here you can post each line to whatever you need
});