title: How do I get data as JSON format from the IBM Cloud with a HTTP Request using JavaScript?
body: <p>When I click on &quot;GET DATA&quot; in my App, I would like to access the data in my IBM Cloud with an HTTP request. I need the data in JSON format. This should be implemented with JavaScript.
  My current code is here:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function httpRequest() {
    const xhr = new XMLHttpRequest()
  //open a get request with the remote server URL
  xhr.open("GET", "https://&lt;orgID&gt;.internetofthings.ibmcloud.com/api/v0002/device/types/&lt;typeID&gt;/devices/&lt;deviceID&gt;/state/&lt;logicalInterfaceID&gt;" )
  //send the Http request
  xhr.send()
  
  //EVENT HANDLERS
  
  //triggered when the response is completed
  xhr.onload = function() {
    if (xhr.status === 200) {
      //parse JSON datax`x
      data = JSON.parse(xhr.responseText)
      console.log(data.count)
      console.log(data.products)
    } else if (xhr.status === 404) {
      console.log("No records found")
    }
  }
  
  //triggered when a network-level error occurs with the request
  xhr.onerror = function() {
    console.log("Network error occurred")
  }
  
  //triggered periodically as the client receives data
  //used to monitor the progress of the request
  xhr.onprogress = function(e) {
    if (e.lengthComputable) {
      console.log(`${e.loaded} B of ${e.total} B loaded!`)
    } else {
      console.log(`${e.loaded} B loaded!`)
    }
  }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn {
    cursor: pointer;
    background-color: #555;
    color: #fff;
    display: inline-block;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="src/css/styles.css"/&gt;
      &lt;script src="src/js/script.js"&gt;&lt;/script&gt;
      &lt;title&gt;GET DATA&lt;/title&gt;
      &lt;div class="btn" onclick="httpRequest()"&gt;
        GET DATA
      &lt;/div&gt;   
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The placeholder <strong>orgID</strong>, <strong>typeID</strong>, <strong>deviceID</strong>, <strong>logicalInterfaceID</strong> in my code etc. have of course been replaced by the correct ID.</p>
  <p><strong>The problem is, I don't know how to include the username and password in the URL so that I can access the IBM Cloud.</strong></p>
  <p><a href="https://www.ibm.com/docs/en/mapms/1_cloud?topic=reference-application-rest-apis" rel="nofollow noreferrer">https://www.ibm.com/docs/en/mapms/1_cloud?topic=reference-application-rest-apis</a></p>