Call an HTTP endpoint for each element on a page

request-foreach-element.js

// Pretty abstract - basically this is for when:
// there's a bunch of things you can get with a query selector
// which you can map to and endpoint url
// and then want to call the endpoint for each thing
// this is the code for you... and by you I probably mean future Adam 👋

// Designed to run in the Google Chrome console

// Set these parameters 🔧
// These are example values for deleting all topics on uk pcpartpicker
const selector = '.topicTitle'
const mappingFn = elem => {
  const formData = new FormData()
  formData.append('topic_id', elem.href.split('/')[5].substring(0,6));
  return {
    url: 'https://uk.pcpartpicker.com/forums/topic/delete/', // endpoint
    options: {
      method: 'POST', // method
      body: formData, // body
      headers: new Headers({
        'x-csrftoken': 'w9Oo2JL5EGehFPggVDFqwGECkKQUmFNAc2FdcweAlhy59FusrHB8VCAShfDVaDBy'
      })
    }
  }
}

// Do the thing 🎉
[...document.querySelectorAll(selector)].map(mappingFn).forEach(({ url, options }) => fetch(url, options))