I am using Puppeteer library to scrape some data from a web page but it returns sometimes weird characters. I have set already browser and page options like below. The weird part of that is not happening always. What could be the cause of that?
For example, I got this "چای خونه" instead of "Tea Room".
//I set these options for the headless browser
args: [
"--no-sandbox",
"--disable-notifications",
"--disable-dev-shm-usage",
"--lang=en-US,en-GB,en"
]
//I set also http 'Accept-Language' header like this way
await page.setExtraHTTPHeaders({
'Accept-Language': 'en-US'
});
// the function grabbing text from an html element
grabElementText(element) {
if (element) {
return element._page.evaluate(el => el.innerText, element);
}
}
Related
I'm just trying something new out to get skills more up to date, and am a bit stumped on this jQuery API response. I have all of the results going to console fine, I have them displaying on an html file, but all together as one. I want to put a break between each word (it's [Words API][1] and I'm stuck. I usually use PHP, but well, it's not practical for what I'm planning. Here is the code, and I'll show the best I can in results. Thank you!
<div id="div1">
// This is where it shows up as "unmitigated,butcherly,crimson,gory,homicidal,internecine"
</div>
<script>
const settings = {
"async": true,
"crossDomain": true,
"url": "https://wordsapiv1.p.rapidapi.com/words/bloody/similarTo",
"method": "GET",
"headers": {
"x-rapidapi-key": "<my key>",
"x-rapidapi-host": "<host>"
}
};
$.ajax(settings).done(function (response) {
console.log(response);
$("#div1").html(response.similarTo + " "); // This puts a comma between each word, but no spacing, when I want a line break. I need to be able to customize results, make them links, add styles, etc.
});
Thank you so much! Only 3 more weeks of strict "stay at home" Covid19 orders. I'm learning a lot!
I guess you have a text string in response.similarTo containing a mess of comma-separated words.
You can process them like this. Split breaks them at commas. The rest of this code formats them into an HTML list and displays them.
const results = []
const words = response.similarTo.split(',')
for (const word of words) {
/* do what you will with each word in turn, for example... */
results.push('<li>' + word + '</li>')
}
$("#div1").html('<ol>' + results.join('') + '</ol>')
I'm able to get the bokeh object to render properly inside a div on the webpage. The bokeh object is returned via Flask and is generated based on a user-click. However, my problem is that on every user-click, the new bokeh object that is produced, gets appended to the div.
I've read about the .html() way of replacing content, and I've also read about document.getElementById, but I'm not sure how to replace my div content and avoid the append. Any help is appreciated.
The relevant snippet from my index.html
rows.forEach(row => {
row.addEventListener("click", () => {
var pic = <<my_url>> + ($(row).attr("data-href"));
$.ajax({
data : {},
dataType: "json",
type : 'GET',
url : <<my flask app path>>
})
.then(function(response) {return response;})
.then(function(item) {
Bokeh.embed.embed_item(item);
})
});
});
emptying the contents of the div on-click is the approach I took to resolve my situation. i.e.,
$(div).empty();
I am trying to make the page content dynamic. I am using ck-editor in which i added html content and used the same vue variables inside it which i declared in the vue file where i want to show ck-editor data. I found a similar post vuejs - “editing” html inside variable
which works fine if i write the html inside a variable. But in my case, i am saving data in database. It is saving properly with html tags, without converting the tags. When i get data using axios it returns it in form of string. And i used vue variable to display that html.
Here is my code for better understanding:
<div v-html="htmlText"></div>
new Vue({
el: '#app',
created() {
this.getSalesContent();
},
data: {
salesContent: '',
pageName: 'Sales',
salesNumber: '987-586-4511'
},
computed: {
htmlText() {
return `${this.salesContent}`;
//return this.salesContent;
}
},
methods: {
getSalesContent(){
axios.get('api/Sales').then(({ data }) => { // getting data from DB
this.salesContent = data.sales; //data.sales have this.pageName and this.salesNumber variables
});
}
}
});
Here is the example of data saved in db:
<p style="font-weight:bold"><span style="color:red">{{pageName}}</span>,</p>
<p style="font-weight:bold"><span style="color:red">${this.pageName} ${this.pageName}</span></p>
<p style="font-weight:bold">Contact Sales at ${this.salesNumber} {{salesNumber}}</span></p>
I used variables in all possible ways. But on the page they are printing in it the same way i saved it. Here is the output:
screenshot
Can anyone help me make it working.
Thanks in Advance.
According to the docs this does not seem possible:
https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
Particularly:
The contents of the span will be replaced with the value of the
rawHtml property, interpreted as plain HTML - data bindings are
ignored.
You could as suggested in that answer just use a computed based on what you get from the server.
IMHO since the salesContent is fetched from db, it's a plain String. Thus nor vuejs or vanilla javascript will replace the inline variables with their values. (It may be possible by using eval, but it's totally out of question...) You should manually do that with String replace function. Like the following:
<p style="font-weight:bold"><span style="color:red">{{pageName}}</span>,</p>
<p style="font-weight:bold">Contact Sales at {{salesNumber}}</span></p>
methods: {
getSalesContent(){
axios.get('api/Sales').then(({ data }) => { // getting data from DB
let salesContent = data.sales; //data.sales have this.pageName and this.salesNumber variables
salesContent = salesContent.replace(/{{pageName}}/g, this.pageName)
salesContent = salesContent.replace(/{{salesNumber}}/g, this.salesNumber)
this.salesContent = salesContent
});
}
}
I have a very long document - 40000 words - I would like to display in a styled manner, like html.
I need to display it with headers, paragraphs and bold styling.
I am building an Angular app. I tried loading the converted document as a local html, but it takes a very long time.
For instance, I tried this:
var html = this.http.get("../data.html").map(ref => {
console.log(html);
} );
Are there any other ways I can load this text? Maybe break it up into smaller chunks somehow?
Based on what you've provided with no other context:
You need to subscribe to the Observable otherwise, nothing will ever happen since Observable execution is lazy:
var html = this.http.get("../data.html")
.map(ref => {
console.log(html);
return ref;
})
.subscribe(ref => ...);
Also, you're using console.log(html) in your map, but html does not exist in the context of map so you would need to do something like:
var html = this.http.get("../data.html")
.map(ref => {
console.log(ref); // Does this log appear and what does it contain?
return ref;
})
.subscribe(ref => ...);
Finally, var html is an Observable not HTML so I'd probably rename this to something a bit more descriptive if you're passing it around and subscribing to the response:
const data$ = this.http.get("../data.html")
.map(ref => {
console.log(ref);
return ref;
});
// ... do other stuff
data$.subscribe(ref => ...);
Or if not passed chain it and subscribe which indicates the Observeable has completed:
this.http.get("../data.html")
.map(ref => {
console.log(ref);
return ref;
}).subscribe(ref => ...);
If this doesn't help answer the question it's because you haven't provided enough information, and I'd suggest answering:
In the second example what does console.log(ref) output?
Include more code that provides more context like do you use subscribe already and what does the data you're using look like?
Make an example in StackBlitz that replicates the issue. Just click Angular and you get a pre-made Angular application you can drop your code into and then people can hack directly on the issue. Takes tops 5 seconds to setup
Hi I am having a problems displaying my array via JSON object. I passed two variables to PHP which returns an array. I then wish to loop through the array and append the result to a div
The PHP works fine as I have tested this before adding the JQuery. When I use google chrome to inspect the console, I dump out data which displays as [] not an object, is this correct?
the contents of the array do not have a key, only a collection of list items with an image path for example
<li><img src="'.$image_path.'"</li>
I encode the array back to the listener,
echo json_encode($result);
code for JQuery
$.post('Look_Controller.php', {look: look, account: account}, function(data) {
$.each(data, function(i, item) {
$('#carousel-ul').empty();
content = item;
$(content).appendTo('#carousel-ul');
});
}, "json");
How do I append each individual result to the div (#carousel-ul)?,
I have also tried
content = item.this;
content = (this).item;
content = $(this).item;
I am not sure if it because the console.log(data) displays [] instead of object?
Hope someone can advise!
Thanks
What happen when you try this ?
$.post('Look_Controller.php', {look: look, account: account}, function(data) {
$('#carousel-ul').empty();
console.log(data);
$.each(data, function(i, item) {
console.log(item);
content = item;
// If "carousel-ul" is a <ul> tag uncomment the next line
// content = $('<li/>').html(content);
$(content).appendTo('#carousel-ul');
});
}, "json");
[] is an empty array. If that's what's being shown you have no data.
So it's probably not coming back from the server. Check the Network tab in the Chrome debugger and see what your response looks like.