Basic consumption of rest response by simple javascript

Posted by OctavioOlguin on 26-Jun-2019 04:21

I'm following this demo   https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/ to learn about publishing and consuming services (rest) from PASOE.

I  got struck at the part about:

const app = document.getElementById('root');

const logo = document.createElement('img');
logo.src = 'logo.png';

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(logo);
app.appendChild(container);

var request = new XMLHttpRequest();

//request.open('GET', 'ghibliapi.herokuapp.com/films', true);
request.open('GET', '200.77.145.150:8818/.../Precios', true);
request.onload = function () {

  // Begin accessing JSON data here
  /*var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach(precio => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');

      const h1 = document.createElement('h1');
      h1.textContent = precio.Articulo;

      const p = document.createElement('p');
      precio.Nombre = precio.Nombre.substring(0, 300);
      p.textContent = `${precio.Nombre}...`;

      container.appendChild(card);
      card.appendChild(h1);
      card.appendChild(p);
    });
  } else {
    const errorMessage = document.createElement('marquee');
    errorMessage.textContent = `Gah, it's not working!`;
    app.appendChild(errorMessage);
  }*/

  var data = JSON.parse(this.response)

  data.forEach(movie => {
    // Log each movie's title
    console.log(movie)
  })
}

But I think that is not working  (it throws: 

transp1.js:44 Uncaught TypeError: data.forEach is not a function
at XMLHttpRequest.request.onload (transp1.js:44)

because the extra outer objects that are part of response:

{
   "response":{
      "ttPrecios":{
         "ttPrecios":[
            {
               "Articulo":"ADOBADO",
               "Nombre":"ADOBADO",
               "Menudeo":58.0,
               "Mayoreo":53.0,
               "SoloMayoreo":0
            },
            {
               "Articulo":"AGUJA Res",
               "Nombre":"AGUJA Res",
               "Menudeo":80.0,
               "Mayoreo":76.0,
               "SoloMayoreo":0
            }
         ]
      }
   }
}

Where should I look at handbook, in order to learn this techniques?

Thanks

Jorge

Posted by egarcia on 26-Jun-2019 17:47

Hello Jorge,

Yes, you need to access the corresponding property.

Depending on how you have mapped the parameters of the REST API, you would get a response object.

In this case, you are getting a response object.

You can use the following code to get the desired value for data.

var data = JSON.parse(this.response).response

Please notice that "this.response" corresponds to the property of the request object.

The 2nd response is the property in the value of the actual response.

Also, notice that the 1st ttPrecios is the name of the parameter and the 2nd ttPrecios is the array reference in the value which is a temp-table.

The following article gives you some additional info in the context of JSDO invoke operation:

- community.progress.com/.../2938.calling-invoke-operations-with-the-jsdo

I hope this helps.

All Replies

Posted by OctavioOlguin on 26-Jun-2019 14:10
Posted by egarcia on 26-Jun-2019 17:47

Hello Jorge,

Yes, you need to access the corresponding property.

Depending on how you have mapped the parameters of the REST API, you would get a response object.

In this case, you are getting a response object.

You can use the following code to get the desired value for data.

var data = JSON.parse(this.response).response

Please notice that "this.response" corresponds to the property of the request object.

The 2nd response is the property in the value of the actual response.

Also, notice that the 1st ttPrecios is the name of the parameter and the 2nd ttPrecios is the array reference in the value which is a temp-table.

The following article gives you some additional info in the context of JSDO invoke operation:

- community.progress.com/.../2938.calling-invoke-operations-with-the-jsdo

I hope this helps.

Posted by OctavioOlguin on 26-Jun-2019 18:51

I mapped this way:

and changed source code of js script to:

  // Begin accessing JSON data here
  var data = JSON.parse(this.response).response;
  if (request.status >= 200 && request.status < 400) {      
    data.forEach(movie => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');

      const h1 = document.createElement('h1');
      h1.textContent = movie.Articulo;

      const p = document.createElement('p');
      movie.Nombre = movie.Nombre.substring(0, 300);
      p.textContent = `${movie.Nombre}...`;

      container.appendChild(card);
      card.appendChild(h1);
      card.appendChild(p);
    });
  } else {
    const errorMessage = document.createElement('marquee');
    errorMessage.textContent = `Gah, it's not working!`;
    app.appendChild(errorMessage);
  }

But still got this on console

Uncaught TypeError: data.forEach is not a function
at XMLHttpRequest.request.onload (transp1.js:21)
request.onload @ transp1.js:21
load (async)
(anonymous) @ transp1.js:16

TIA

Posted by marian.edu on 27-Jun-2019 06:28

Octavio, have you tried to echo out the response? The way you mapped that is definitively not an array, if you don't map the output parameter directly to the 'Body' it will create a 'response' object (json object), in your case the temp-table will be in (this.response).response.ttPrecios... and there will the the temp-table object, accessing the array will need an extra 'ttPrecios', my precious won't work :)


If you map that directly to Body you will get your data array in  (this.response).ttPrecios, in case you only send back that temp-table it's easier to map it like that but then when you decide to add additional output it will require extra changes on the JS side.

Marian Edu

Acorn IT 
www.acorn-it.com
www.akera.io
+40 740 036 212

Posted by OctavioOlguin on 27-Jun-2019 14:23

Thanks!!!!!!

That explanation is marvelous!!!

I'll do as you told.

(Any way, where is that info explained? Is there a handbook or something?)

(I my gosh, I RRREEAAALLLYYYY missing John Sadd's incredible handbooks)

This thread is closed