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
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.
Should I go down this road?
stackoverflow.com/.../how-to-extract-a-json-object-thats-inside-a-json-object
??
Thanks
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.
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
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 :)
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)