Angular 11 HttpClient Generic Observable map service values into a Class - node.js

I'm consuming a POST service in .net that returns the next structure, the service return data correctly
enter image description here
public sendExcelInBase64ToBackEnd(data: any) {
this.customOptions = {
headers: this.customHttp.buildHeader(),
};
this.customHttp.Post<SerialResultDTO>('/serialsExcel', data, this.customOptions).subscribe(val => { // <- val data returns ok
this.serialResult = val;
let x = this.serialResult.Success;
console.log(x);
console.log(val.Success); // <- prints undefined
})
return null;
}
When I try print in console 'val.Success' it prints undefined!!, Why this happens??
I want assign all atributes to a custom class in angular, but in chrome debug it shows object data, but in time of asign to my model class it gets undefined!!
Someone can help me please!! I appreciate that!!

Your image shows a lowercase success, but you try to log a titlecase Success. Change to
public sendExcelInBase64ToBackEnd(data: any) {
this.customOptions = {
headers: this.customHttp.buildHeader(),
};
this.customHttp.Post<SerialResultDTO>('/serialsExcel', data, this.customOptions).subscribe(val => {
this.serialResult = val;
let x = this.serialResult.success;
console.log(x);
console.log(val.success);
})
return null;
}

Related

openweathermap flutter call for local condtions. I get error type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'String'

void getData() async {
http.Response response = await http.get(Uri.parse(
'https://api.openweathermap.org/data/2.5/weather?lat=$latitude&lon=$longitude&appid=$apiKey'));
if (response.statusCode == 200) {
String data = response.body;
var decodedData = jsonDecode(data);
String city = jsonDecode(decodedData)['name'];
double temperature = jsonDecode(decodedData)['main']['temp'];
int condition = jsonDecode(decodedData)['weather'][0]['id'];
print(city);
print(temperature);
print(condition);
} else {
print(response.statusCode);
}
}
Solved. I was using code from a tutorial that was about a year old. I followed the flutter docs to solve this problem by creating a WeatherData class with the city, temperature and condition properties and called
the http request through the WeatherData class. It worked without errors

Return String from Future Object

I am trying to fetch html page via localproxy to parse and get urls from it. I can't find any library which works without Future in Dart. So i have difficulty returning String from a Future Object. Below is full code of dart file.
import 'package:universal_html/driver.dart';
import 'package:universal_html/prefer_universal/html.dart';
String proxyUrl='http://localhost/php-proxy/index.php?q=';
String hallTicketUrl='http://www.ignou.ac.in/ignou/studentzone/results/6';
Future<String> getList()async{
final driver = HtmlDriver();
await driver.setDocumentFromUri(Uri.parse(proxyUrl+hallTicketUrl));
final items = driver.document.querySelectorAll('.middleconten2column a');
Element urls=Element.tag('urls');
items.forEach((item)=>urls.append(Element.tag('url')
..setAttribute('href',item.getAttribute('href'))
..text=item.text
)
);
print('${items.length} items found');
return Future.value(urls.outerHtml);
}
String Handler(String app){
switch(app){
case 'list': return getList() as String;
}
return "";
}
main(){
print(Handler('list'));
}
I think you have misunderstood what the async keyword does to methods. When a method are marked as async it will always automatically returns a Future of something. That is the reason why you need to specify e.g. Future<String> as the return type.
But because the creation are done "automatically" you don't really need to do the following:
return Future.value(urls.outerHtml);
But can just do:
return urls.outerHtml;
After this your have discovered the problem with using asynchronous programming where everything in your call stack needs to be marked as async since you have an await somewhere in your code.
I have fixed your code so it now hope it works correctly with all the future stuff:
import 'package:universal_html/driver.dart';
import 'package:universal_html/prefer_universal/html.dart';
String proxyUrl = 'http://localhost/php-proxy/index.php?q=';
String hallTicketUrl = 'http://www.ignou.ac.in/ignou/studentzone/results/6';
Future<String> getList() async {
final driver = HtmlDriver();
await driver.setDocumentFromUri(Uri.parse(proxyUrl + hallTicketUrl));
final items = driver.document.querySelectorAll('.middleconten2column a');
Element urls = Element.tag('urls');
items.forEach((item) => urls.append(Element.tag('url')
..setAttribute('href', item.getAttribute('href'))
..text = item.text));
print('${items.length} items found');
return urls.outerHtml;
}
Future<String> Handler(String app) async {
switch (app) {
case 'list':
return await getList();
}
return "";
}
main() async {
print(await Handler('list'));
}

For await x of y using an AsyncIterator causes memory leak

When using AsyncIterator i have a substential memory leak when used in for-x-of-y
I need this when scraping a HTML-Page which includes the information about the next HTML-Page to be scraped:
Scrape Data
Evaluate Data
Scrape Next Data
The async Part is needed since axios is used to obtain the HTML
Here is a repro, which allows to see the memory rising von ~4MB to ~25MB at the end of the script. The memory is not freed till the program terminates.
const scraper = async ():Promise<void> => {
let browser = new BrowserTest();
let parser = new ParserTest();
for await (const data of browser){
console.log(await parser.parse(data))
}
}
class BrowserTest {
private i: number = 0;
public async next(): Promise<IteratorResult<string>> {
this.i += 1;
return {
done: this.i > 1000,
value: 'peter '.repeat(this.i)
}
}
[Symbol.asyncIterator](): AsyncIterator<string> {
return this;
}
}
class ParserTest {
public async parse(data: string): Promise<string[]> {
return data.split(' ');
}
}
scraper()
It looks like that the data of the for-await-x-of-y is dangling in memory. The callstack gets huge aswell.
In the repro the Problem could still be handled. But for my actual code a whole HTML-Page stays in memory which is ~250kb each call.
In this screenshot you can see the heap memory on the first iteration compared to the heap memory after the last iteration
Cannot post inline Screenshots yet
The expected workflow would be the following:
Obtain Data
Process Data
Extract Info for the next "Obtain Data"
Free all Memory from the last "Obtain Data"
Use extracted information to restart the loop with new Data obtained.
I am unsure an AsyncIterator is the right choice here to archive what is needed.
Any help/hint would be appriciated!
In Short
When using an AsyncIterator the Memory is rising drastically. It drops once the Iteration is done.
The x in `for await (x of y) is not freed till the Iteration is done. Also every Promise awaited inside the for-loop is not freed.
I came to the conclusion that the Garbage Collector cannot catch the contents of Iteration, since the Promises generated by the AsyncIterator will only fully resolve once the Iteration is done.
I think this might be a Bug.
Workaround Repro
As workaround to free the contents of the Parser we encapsulate the Result in a lightweight Container. We then free the contents, so only the Container itself remains in Memory.
The data Object cannot be freed even if you use the same technic to encapsulate it - so it seems to be the case when debugging at least.
const scraper = async ():Promise<void> => {
let browser = new BrowserTest();
for await (const data of browser){
let parser = new ParserTest();
let result = await parser.parse(data);
console.log(result);
/**
* This avoids memory leaks, due to a garbage collector bug
* of async iterators in js
*/
result.free();
}
}
class BrowserTest {
private i: number = 0;
private value: string = "";
public async next(): Promise<IteratorResult<string>> {
this.i += 1;
this.value = 'peter '.repeat(this.i);
return {
done: this.i > 1000,
value: this.value
}
}
public [Symbol.asyncIterator](): AsyncIterator<string> {
return this;
}
}
/**
* Result class for wrapping the result of the parser.
*/
class Result {
private result: string[] = [];
constructor(result: string[]){
this.setResult(result);
}
public setResult(result: string[]) {
this.result = result;
}
public getResult(): string[] {
return this.result;
}
public free(): void {
delete this.result;
}
}
class ParserTest {
public async parse(data: string): Promise<Result>{
let result = data.split(' ');
return new Result(result);
}
}
scraper())
Workaround in actual context
What is not shown in the Repro-Solution is that we also try to free the Result of the Iteration itself. This seems not to have any effect tho(?).
public static async scrape<D,M>(scraper: IScraper<D,M>, callback: (data: DataPackage<Object,Object> | null) => Promise<void>) {
let browser = scraper.getBrowser();
let parser = scraper.getParser();
for await (const parserFragment of browser) {
const fragment = await parserFragment;
const json = await parser.parse(fragment);
await callback(json);
json.free();
fragment.free();
}
}
See: https://github.com/demokratie-live/scapacra/blob/master/src/Scraper.ts
To test with an actual Application: https://github.com/demokratie-live/scapacra-bt (yarn dev ConferenceWeekDetail)
References
Github NodeJs: https://github.com/nodejs/node/issues/30298
Github DEMOCRACY: https://github.com/demokratie-live/democracy-client/issues/926
Conclusion
We found a feasible Solution for us. Therefore i close this Issue. The followup is directed towards the Node.js Repo in order to fix this potential Bug
https://github.com/nodejs/node/issues/30298

passing function to a class in nodejs

I have a function that I need to pass to a class I have defined in nodeJs.
The use case scenario is I want to give the implementer of the class the control of what to do with the data received from createCall function. I don't mind if the method becomes a member function of the class. Any help would be appreciated.
//Function to pass. Defined by the person using the class in their project.
var someFunction = function(data){
console.log(data)
}
//And I have a class i.e. the library.
class A {
constructor(user, handler) {
this.user = user;
this.notificationHandler = handler;
}
createCall(){
var result = new Promise (function(resolve,reject) {
resolve(callApi());
});
//doesn't work. Keeps saying notificationHandler is not a function
result.then(function(resp) {
this.notificationHandler(resp);
}) ;
//I want to pass this resp back to the function I had passed in the
// constructor.
//How do I achieve this.
}
callApi(){ ...somecode... }
}
// The user creates an object of the class like this
var obj = new A("abc#gmail.com", someFunction);
obj.createCall(); // This call should execute the logic inside someFunction after the resp is received.
Arrow functions (if your Node version supports them) are convenient here:
class A {
constructor(user, handler) {
this.user = user;
this.notificationHandler = handler;
}
createCall() {
var result = new Promise(resolve => {
// we're fine here, `this` is the current A instance
resolve(this.callApi());
});
result.then(resp => {
this.notificationHandler(resp);
});
}
callApi() {
// Some code here...
}
}
Inside arrow functions, this refers to the context that defined such functions, in our case the current instance of A. The old school way (ECMA 5) would be:
createCall() {
// save current instance in a variable for further use
// inside callback functions
var self = this;
var result = new Promise(function(resolve) {
// here `this` is completely irrelevant;
// we need to use `self`
resolve(self.callApi());
});
result.then(function(resp) {
self.notificationHandler(resp);
});
}
Check here for details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

Javascript accessing object and array defined in modular function

This is a bit foreign to me and I'm probably not understanding it correctly. This is what I have:
var imgModule = (function() {
var imgLocations = {};
var images = [];
imgLocations.setImage = function(img, location) {
imgLocations[img] = location;
}
imgLocations.getImg = function(img) {
return imgLocations[img];
}
imgLocations.setImageArray = function(img) {
images.push(img);
}
imgLocations.getImageArray = function() {
return images;
}
return imgLocations;
}());
I want to be able to access the imgLocations Object and images array from outside this function. The setting functions work, but
document.getElementById("but").onclick = function() {
console.log(imgModule.imgLocations.getImageArray());
console.log(imgModule.imgLocations.getImg(imgName));
}
Both return "undefined". How do I access these variables? And how can I improve this function? Please be patient with me and explain what I'm doing wrong :) I'm trying to learn it the right way instead of defining a global variable outside all functions.
The reason why this isn't working, is because your imgModule is returning the imgLocations object. That being the case, imgModule will actually be the imgLocations object. So you would access your methods like so:
imgModule.setImage()
imgModule.getImg()
imgModule.getImageArray()
imgModule.setImageArray()
And as #gillesc stated. If you are wanting to keep the current syntax of imgModule.imgLocations.getImg() then you could return the imgLocations like so
return {
imgLocations: imgLocations
}
doing so would allow you to add more functionality to your module
return {
imgLocations: imgLocations,
otherObject: otherObject
}
...
imgModule.otherObject.someFunctionCall();
The problem is you are returning the object created and are not setting it as a property of an object.
So in your case this is how it would work.
document.getElementById("but").onclick = function() {
console.log(imgModule.getImageArray());
console.log(imgModule.getImg(imgName));
}
What you need to do is return it like this
return {
imgLocations: imgLocations
}
If you want the API you are attending to create and still have access to the array which you can not do currently.
You don't access imgModule.imgLocations, since what you return is imgLocations, you should access them as:
document.getElementById("but").onclick = function() {
console.log(imgModule.getImageArray());
console.log(imgModule.getImg(imgName));
}
It seems you try to write module pattern.
For deep understanding, I recommend you following article:
The Module Pattern, by Addy Osmani
and pay attention to example with counter:
var testModule = (function () {
var counter = 0;
return {
incrementCounter: function () {
return counter++;
},
resetCounter: function () {
console.log( "counter value prior to reset: " + counter );
counter = 0;
}
};
})();
// Usage:
// Increment our counter
testModule.incrementCounter();
// Check the counter value and reset
// Outputs: counter value prior to reset: 1
testModule.resetCounter();

Resources