How to accept a list of languages as an HTTP request from a HTML form?

Question

I have created a simple custom web page that allows a user to select multiple languages of their choice.

My question: How can this be implemented by accepting a list of languages as a HTTP request from a custom web page, and then loop over them in Azure logic app? What I means is that, since [Azure Logic apps are HTTP triggered][1], can the custom web page simply make a request to that endpoint directly? For example, when we call the logic app from custom web page, how can we ensure that when a user submits the form, I make a POST to the logic app URL and pass in the body a content which is something like this:

Answer 1

After discussing the problem, what it looks like you need is to send data to an Azure Logic HTTP endpoint. That's fairly straightforward, and as you can send data in whatever json shape you need to that endpoint, doesn't need anything special (like looping over multiple requests).

Here's an example that submits one web request for each language. It uses FormData to access the <form /> element and then gets all the language values, making a fetch request with the list of languages. It then logs the result. You probably want to do something other than logging the result, but hopefully this will get you started.

function fetchForLanguages(languages) {
  console.info('starting fetch for', languages)
  return fetch("https://reqres.in/api/users", { // this should be your azure provided endpoint instead
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      languages: languages
    })
  }).then(response => {
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.status} ${response.statusText}`);
    }
    return response.json()
  })
}


function handleSubmit(event) {
  event.preventDefault()
  const data = new FormData(event.currentTarget)
  const languages = data.getAll('language')
  console.info('languages selected:', languages)
  fetchForLanguages(languages)
    .then((result) => console.log('got result:', result))
}

let form = document.getElementById('language-form')
form.addEventListener('submit', handleSubmit)

<form id="language-form">
  <ul>
    <li><label><input type="checkbox" name="language" value="english"> English</label></li>
    <li><label><input type="checkbox" name="language" value="spanish"> Spanish</label></li>
    <li><label><input type="checkbox" name="language" value="vietnamese"> Vietnamese</label></li>
    <li><label><input type="checkbox" name="language" value="somali"> Somali</label></li>
    <li><label><input type="checkbox" name="language" value="chinese"> Chinese</label></li>
    <li><label><input type="checkbox" name="language" value="amharic"> Amharic</label></li>
    <li><label><input type="checkbox" name="language" value="korean"> Korean</label></li>
    <li><label><input type="checkbox" name="language" value="russian"> Russian</label></li>
    <li><label><input type="checkbox" name="language" value="tagalog"> Tagalog</label></li>
    <li><label><input type="checkbox" name="language" value="arabic"> Arabic</label></li>
    <li><label><input type="checkbox" name="language" value="khmer"> Khmer</label></li>
    <li><label><input type="checkbox" name="language" value="thai"> Thai</label></li>
    <li><label><input type="checkbox" name="language" value="lao"> Lao</label></li>
    <li><label><input type="checkbox" name="language" value="japanese"> Japanese</label></li>
    <li><label><input type="checkbox" name="language" value="deutsch"> Deutsch</label></li>
  </ul>
  <button type="submit">Submit</button>
</form>