Removing headers from response in Angular Observable - json

Working with AWS DynamoDB to return some film JSON data to my application. There can be multiple films so I need to use an array and iterate through it to display my film list. However, I'm getting an error stating that only arrays and iterables are allowed.
I've also console.logged the response, which is below.
As you can see, my response has a body and headers, the headers are needed for my http requests to prevent cors issues, but I'm now really struggling to break the data down to Items. I'm retrieving the data from a Lambda function with an observable called IFilm[].
Above is my service code, which pipes the data to my dashboard component.
And the filmList populated in this function is what I'm trying to iterate through in my html using an *ngFor. When trying to use .body or the likes on the response, I receive this error.
I feel like I'm so close to cracking this, so any advice is appreciated and if any clarification is required just ask :)
Thanks.
[edit in case anyone suggests this]
I've also tried using next, complete, error in my .subscribe but had no luck.
[edit 2]
So I tried using response['body'] and received this message.
And I also tried using the second suggestion, changed some things around a little but now it's gone very weird.
[edit 3]
Sorry my mistake, I had missed one of the changes. My service is now red line free, but the error about missing length, pop, concat, has moved to my dashboard component.
[edit 4]
Fixed it, for any future readers here's what I did. When making an API call to my Lambda function I had to have the headers and body returned. I was trying to take this data and pass it, both headers and body, into my IFilm model. Instead, what I needed to do was create an IResponse model, parse some of the data from that and then populate my IFilm[] using my IResponse.
And below is the code in my dashboard component for populating my IFilm array.

Why are you set the _http, with the new HttpClient()? It is injected by Dependency Injection if you put the HttpClientModule into the AppModule imports array.
Also you specified the generic return type IFilm[] so if you get back a HttpResponse with a body parameter and IFilm[] in it you have to specify as a HttpResponse<IFilm[]>.
So the actual code is:
this._http.get<HttpResponse<IFilm[]>>(...)
Plus the return value of the getFilmList should be Observable<HttpResponse<IFilm[]>>.
More about the HttpResponse here: https://angular.io/api/common/http/HttpResponse
[Update]
Then if you updated, you can get the films by response.body.
this.filmList = response.body;

Related

Issue with JSON and Flutter

First off, let me apologise for any mistakes, as this is my first post.
Now, for the actual issue:
I've coded a PHP script that handles MySQL Queries, including one that fetches all data from a certain table.
I made it so the final result is a JSON object, containing all rows from said table.
I also coded a Flutter class (Dart) that handles the request for the JSON object via the URL, and I got it to successfully log said JSON to the console.
However, when I use that data to show on an actual List of Widgets, this is what appears on screen:
Error Shown
Any ideas on how to fix this?
(For NDA reasons, I am not allowed to show the console logs.).
Any help is appreciated!

JSON object losing info between API call and Frontend

I'm making a website that gets its info from a RESTapi I've written and hosted myself, have had no data problems thus far.
Now I'm trying a simple retrieve of a json object and I get all the info correctly as shown here in the API. (Visualized & tested in Swagger)
As you can clearly see, it retrieves it the complete object and underlying objects correctly (blurred sensitive info).
Pay attention to the property "AmountOfEggs" though.
Now when i call this api endpoint (exactly the same way) in my site and console.log the result.data, this is the feedback.
Now for some reason I can't recieve AmountOfEggs in my frontend.
I've recreated the entire object, wrote different names, passed different props (Id, NumberBus, etc are passed in this situation with no problem, which are also int (number) types).
I have no idea why this property gets "dropped" in the transfer and filled with/defaults to an empty string.
Any help would be greatly appreciated.
I found where it went wrong and it's due to different factors.
To start, I am making this site using the Vue framework, which has reactive components, which means, data gets adjusted and you get live updated components on your views/pages.
In the page that contained the call, I also wanted to add dynamic styling. The code I used for this is the following:
v-for="seller in retrievedSellers"
:key="seller.Id"
:class="[
'sellerStyle'
, (seller.AmountOfEggs = 0 ? 'grey-out-seller' : ''),
]"
Now two things to note, first of all this might look like backend coding but this is Vue logic on the .vue file which handles the dynamic options that Vue provides so I never thought to look here for the error.
The error of couse is the 'seller.AmountOfEggs = 0' part, using one equal sign (assignment) instead of two (comparison).
So I learned,
Vue doesn't throw errors on assignments in code that is used to generate frontend (where you should NEVER alter your data).
My console.log was the moment the response of the API came in, where apparently it was already assigned a new value (due to my code above) before hitting the console.log.
It still greatly surprises me that Vue handles ^this^ first to make sure your reactive components are up to date before finishing the api call itself.
However, I still don't understand how it said "" instead of 0.
I'm using typescript (javascript strongly-typed) so it definitely wants to contain a number and not an empty string. Even in the declaration of my DTO the property is defined as (and expects) a number.

How to process Vue/Axios Json payload posted data on Yii2

It took me a while to understand this, being that it was a little obvious. I will answer myself, so other can benefit of the answer and ofcourse to see if there's a better way to do this. The problem was based on Axios/Yii2 but I guess this will apply equally to other frontend libraries/frameworks sending data to Yii2.
I needed to post data from a small form made on Vuejs, sending the request Axios to a Action/Controller on Yii2, so data is sent on a simple POST request and the post is getting to the controller, but I was not able to receive the data on the action, $_POST | $post arrives empty (checked using xdebug).
As much as I remember, this had something to do with security. But I already tried by disabling public $enableCsrfValidation, so that was not the problem.
public $enableCsrfValidation = false;
But no matter what, data was not being added to the request/post data inside Yii2.
The following Image, explains the problem you will find there:
The Axisos method that sends the post with test data.
The Yii2 Action stpoed at the place, I should be able to see data.
The capture of the xdebug variables and data for the request.
The capture of Chrome where you can check the payload is sent.
The answer is as I said "kind of obvious", but I could not see that, and I am sure some other devs will probably fall on this.
After searching like crazy and asking everyone, I tried sending the request by using Postman app, yup the best thing I know to test apis.
Dont forgue to add the xdebug cookie to be able to debug your PHP Endpoint.
There I found the first clue «the obvious part», I was not sending data as a form-data, Axios and other libraries, send the data as a raw (application/json) payload.
This means that Yii2 will no be able to find the data inside the post request, yes its there but Yii2 magic will not work, neither you will find this data inside $GLOBALS or in $_POST.
So reading the Yii2 documentation I found that inside request I can use a function that will help me recovering the Raw data, so to do this use the following line:
$raw_data = Yii::$app->request->getRawBody();
Now, that data gets to you as a simple, raw json string, so use the power of PHP to parse it to an object.
$object= json_decode($raw_data );
And finally use the data inside by calling the properties you look for, sent on the pay load:
Json Payload:
{
"msg":"This is my payload",
"id":"11"
}
To use it:
echo $object->{'msg'}; // prints: This is my payload
So that's the way to handle that, now I would like some other points of view to see if there's a better way or cleaner way to do this. Hope it helps.

Pentaho HTTP Post using JSON

I'm brand new to Pentaho and I'm trying to do the following workflow:
read a bunch of lines out of a DB
do some transformations
POST them to a REST web service in JSON
I've got the first two figured out using an input step and the Json Output step.
However I have two problems doing the final step:
1) I can't get the JSON formatted how I want. It insists on doing {""=[{...}]} when I just want {...}. This isn't a big deal - I can work around this since I have control over the web service and I could relax the input requirements a bit. (Note: this page http://wiki.pentaho.com/display/EAI/JSON+output gives an example for the output I want by setting no. rows in a block=1 and an empty JSON block name, but it doesn't work as advertised.)
2) This is the critical one. I can't get the data to POST as JSON. It posts as key=value, where the key is the name I specify in the HTTP Post field name (on the 'Fields' tab) and the value is the encoded JSON. I just want to post the JSON as the request body. I've tried googling on this but can't find anyone else doing it, leading me to believe that I'm just approaching this wrong. Any pointers in the right direction?
Edit: I'm comfortable scripting (in Javascript or another language) but when I tried to use XmlHttpRequest in a custom javascript snippet I got an error that XmlHttpRequest is not defined.
Thanks!
This was trivial...just needed to use the REST Client (http://wiki.pentaho.com/display/EAI/Rest+Client) instead of the HTTP Post task. Somehow all my googling didn't discover that, so I'll leave this answer here in case someone else has the same problem as me.
You need to parse the JSON using a Modified JavaScript step. e.g. if the Output Value from the JSON Output is called result and its contents are {"data"=[{...}]}, you should call var plainJSON = JSON.stringify(JSON.parse(result).data[0]) to get the JSON.
In the HTTP Post step, the Request entity field should be plainJSON. Also, don't forget to add a header for Content-Type as application/json (you might have to add that as a constant)

How, in Sinatra, to pass a Request Body to other classes?

I'm using a Sinatra app to receive server requests and I want to dissect them in a separate class I call "request", but when I pass the request object the body gets dropped. Trying to read the request.body in the main class works but trying to read it in the new class generates a JSONparser octet error.
In the main Sinatra file, this test call generates the correct response:
puts JSON.parse request.body.read
after, I pass the request to the Request Class with the code below.
req=Request.new(request)
But in the Request class initialization def, the same "puts" code above generates the error:
JSON::ParserError - A JSON text must at least contain two octets!:
Both files include the JSON requirement.
A work around is fairly simple but I would prefer the more elegant solution if I could figure out why it is not working as I expect. Any thoughts are appreciated.
from my tests
the Request.new constructor doesn't seem to clone from Request object
request.clone works proper
you need to do the thorough object inspection if you need anything extreme