I have created Put request to update like count, but when I press like button count doesn't change unless I refresh page. and like/unlike function works fine.
Can somebody help me resolve this issue?
view.py
Here is how i have done put request.
class PostLikeView(APIView):
authentication_classes = [SessionAuthentication]
permission_classes = [IsAuthenticated]
def get(self, request, post_id, slug=None, format=None):
post = Post.objects.get(pk=post_id)
serializer = PostSerializer(post, many=False, )
return JsonResponse(serializer.data, safe=False)
def put(self, request, post_id, slug=None, format=None):
post = Post.objects.get(pk=post_id)
user = self.request.user
# if user.is_authenticated():
if user in post.likes.all():
post.likes.remove(user.id)
else:
post.likes.add(user.id)
serializer = PostSerializer(post, data=request.data)
if serializer.is_valid():
serializer.save()
return JsonResponse(serializer.data, safe=False)
In javascript at like_button.addEventListener i calling function like post where i pass post_id this function works except counter doesnt change unless i refresh page, can I edit so counter update without refreshing if not how to setup automatically to refresh after put request complete?
index.js
function post_list(post) {
const postdiv = document.createElement('div')
postdiv.setAttribute('id','post-div')
const userdiv = document.createElement('div')
userdiv.setAttribute('id', 'username-div')
const bodydiv = document.createElement('div')
bodydiv.setAttribute('id', 'body-div')
const datediv = document.createElement('div')
datediv.setAttribute('id', 'date-div')
const datep = document.createElement('p')
datep.setAttribute('id', 'date-paragraph')
const userp = document.createElement('p')
userp.setAttribute('id', 'username-paragraph')
const bodyp = document.createElement('p')
bodyp.setAttribute('id', 'body-paragraph')
// LIKE
const likesdiv = document.createElement('div')
likesdiv.setAttribute('id', 'likes-div')
let likesp = document.createElement('p')
likesp.setAttribute('id', 'likes-paragraph')
// LIKE BUTTON
let like_button = document.createElement('button')
like_button.setAttribute('id', 'like-button')
const post_id = post.id
let user_id = document.querySelector("#user-id").value;
let likes = post.likes
const postp = document.createElement('p')
postp.innerHTML = post_id
// LIKE COUNTER
let likes_counter = post.likes.length
console.log(likes_counter)
likesp.innerHTML = `Likes: ${likes_counter}`
if (likes.indexOf(parseInt(user_id)) >= 0) {
like_button.innerHTML = 'Unlike'
} else {
like_button.innerHTML = 'Like'
}
like_button.setAttribute('type', 'submit')
like_button.addEventListener('click', () => {
if(like_button.innerText.toLowerCase() === 'like') {
like_button.innerText = 'Unlike';
}
else {
like_button.innerText = 'Like';
}
like_post(post_id, post.likes);
})
datep.innerHTML = post.date
datediv.append(datep)
userp.innerHTML = post.user
userdiv.append(userp)
bodyp.innerHTML = post.post
bodydiv.append(bodyp)
likesdiv.append(likesp, like_button)
postdiv.append(bodydiv, userdiv, likesdiv, datediv, )
document.querySelector('#post-list').append(postdiv)
}
function like_post(post_id) {
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
let user = document.querySelector('#user-id').value;
fetch(`/posts/${post_id}`, {
method: 'PUT',
headers: {
"X-CSRFToken": csrftoken ,
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
user: user,
id: post_id,
})
})
.then(response => response.json())
.then(result => {
// Print result
console.log(result);
})
}
I've managed to solve my problem. If anyone gets in similar situation to know.
This probable is not the most elegant way to solve this but it works
// LIKE COUNTER
let likes_counter = post.likes.length
likesp.innerHTML = `Likes: ${likes_counter}`
if (document.querySelector("#user-id") != null) {
let user_id = document.querySelector("#user-id").value;
// LIKE BUTTON
let like_button = document.createElement('button')
like_button.setAttribute('id', 'like-button')
if (post.likes.indexOf(parseInt(user_id)) >= 0) {
like_button.innerHTML = 'Unlike'
} else {
like_button.innerHTML = 'Like'
}
like_button.setAttribute('type', 'submit')
like_button.addEventListener('click', () => {
if(like_button.innerText.toLowerCase() === 'like') {
like_button.innerText = 'Unlike';
likes_counter ++
}
else {
like_button.innerText = 'Like';
likes_counter --
}
likesp.innerHTML = `Likes: ${likes_counter}`
like_post(post_id, post.likes);
})
likesdiv.append(like_button)
}
Related
i have a ajax chat with laravel and every thing going okay when i open the chat but when i get new message the all old message repeated too , so i write a statement to prevent that because the normal is when i enter the page the chat load all old messages and when come any new message should append it not append the all old messages
if(chat_history.childElementCount !== data.messages.length)
but when i send any new message the statement will be false so what's solution here please
function getMessages(route,theTeacher) {
let chat_history = document.querySelector('#chat_history');
let options = {
method: 'GET',
headers: {
'Content-Type':
'application/json;charset=utf-8',
'X-CSRF-TOKEN':
document.head.querySelector("[name=csrf-token]").content
},
}
fetchRes = fetch(`${route}/${theTeacher}`, options);
fetchRes.then((response) => {
return response.json()
})
.then((data) => {
if(chat_history.childElementCount !== data.messages.length)
{
for (let c in data.messages) {
if(data.messages[c].sender.indexOf('admin') > -1) {
let liTwo = document.createElement("li");
let message_data = document.createElement("div");
let message_data_span = document.createElement("span");
let my_messages = document.createElement("div");
liTwo.classList.add('clearfix');
message_data.classList.add('message-data', 'text-right')
my_messages.classList.add('message', 'my-message');
message_data_span.classList.add('message-data-time');
message_data_span.innerText = data.messages[c].created_at;
message_data.innerHTML = message_data_span.outerHTML;
my_messages.innerText = data.messages[c].message;
liTwo.appendChild(message_data);
liTwo.appendChild(my_messages);
chat_history.append(liTwo);
// message_data_img.src = d
}
if (data.messages[c].sender.indexOf('teacher') > -1) {
let li = document.createElement("li");
let message_data = document.createElement("div");
let message_data_span = document.createElement("span");
let message_data_img = document.createElement("img");
let other_message = document.createElement("div");
li.classList.add('clearfix');
message_data.classList.add('message-data', 'text-right')
other_message.classList.add('message','other-message', 'float-right')
message_data_span.classList.add('message-data-time');
message_data_span.innerText = data.messages[c].created_at;
message_data_img.src = 'http://127.0.0.1/twaqah-project/twaqah/public/storage/' + data.teacher.avatar;
message_data.innerHTML = message_data_span.outerHTML + message_data_img.outerHTML;
other_message.innerText = data.messages[c].message;
li.appendChild(message_data);
li.appendChild(other_message);
chat_history.append(li);
// message_data_img.src = d
}
}
}
});
}
the blade code
setInterval(function() {
getMessages('{{route('chat.teacher-get-messages')}}',{{request()->teacher}});
}, 3000);
I have a task I don't know how to start. Please tell me, if there's too much code attached or if I can get any clues from old questions. Am I missing code ony in one of the files below or both?
In the client page there's only possible to drag and drop the attachment, or click square or link and then choose any files from the computer.
Task description is this:
"Purpose and need: The image attachment is added directly from the clipboard with ctrl + v.
The server has an interface at xxxxx.com. Attachments are sent on PUT request and the query portion of the address is, for example, like ?attachment_id[/request_id/urlkey], where attachment_id is something unique and invented, request_id is the request ID number, and urlkey is the "password" associated the request. The last two are therefore either defined or not at all. The content of the transmission itself must be a multipart/form-data model.
The server then returns a JSON response and if it was a success then the okMessage field can be found in it immediately at the root. Otherwise, an error message such as errorMessages (str arr) or errors (obj → srt) will return.
There are two places on this page to send an attachment:
Make a New Job Request. See if this is visible. Here's how to check it: document.getElementById('v1r').checked. If the file was successfully uploaded to the server, it will add a tag as an extension to this table: document.getElementById ('rootNew')._fields.appendixTags.i.a_newTags.
Previously sent request. See if this is visible. Here's how: document.getElementById('v2r').checked && document.getElementById ('justRequest') parentElement.style.display != 'nothing'
(v1r and v2r are mutually exclusive, meaning only one can be visible at a time) Then, when the file has been successfully uploaded, even if you call this function, it will already be the text you want to see: l_help_addFileList(lt, name, size, mime, days) however, only name information is currently used. But where lt comes from in 1, is document.getElementById('justNew')._fields.appendixTags.i.e_sentFiles, and the conditions in section 2 are: document.getElementById('requestAttachment').e_sentFiles.
Job Request Response (Email) Not yet
In step 2, the credentials can be angled from the tag_id and tag_key data stored in the document.getElementById ('comment') element."
I have no idea where to start. I have two javascript files: index and sendAttachment. First of all, must I modify both files or only sendAttachment one?
Secondly, what I'm missing from the code so that in addition to dragging and droping , attachments can also be attached with ctrl + v?
I appreciate your help. Thank you!
Here's the current codes from client side:
index.js
//SOME CODE FIRST
//Send button
{
let send = document.createElement('div');
send.id = 'send';
send.className = 'tr';
let button = document.createElement('input');
button.type = 'button';
button.onclick = new_sendForm;
button.value = 'Submit';
send.appendChild(button);
root.appendChild(send);
root._send = button;
}
//Shows that notification is received
{
let note = document.createElement('div');
note.id = 'new_note';
note.style.display = 'none';
let div = document.createElement('div');
let text = document.createElement('h2');
text.textContent = 'Sended successfully';
div.appendChild(text);
let button = document.createElement('input');
button.type = 'button';
button.onclick = function reset(){
note.style.display = 'none';
new_resetForm();
if (root._fields.attachmentTags)
l_addBufferedAttachmentInformation(root._fields.attachmentTags.i, []);
};
button.value = 'Empty form';
div.appendChild(button);
div.appendChild(document.createElement('br'));
div.appendChild(document.createElement('br'));
let p = document.createElement('i');
p.textContent = 'You can find this and previous requests from the tab named Previous'
+ ' if you gave your email address.'
;
div.appendChild(p);
p = document.createElement('p');
p.style.fontFamily = "'Lucida Console', monospace";
p.innerHTML = 'Here's the link<br>';
let a = document.createElement('a');
a.href = '#';
a.textContent = 'The link isn't created yet';
p.appendChild(a);
div.appendChild(p);
note.appendChild(div);
root.appendChild(note);
root._note = note;
root._note_a = a;
}
{
let email = root._fields['email'];
let o = s_get();
if (email && email.i && !email.i.value && o.email)
email.i.value = o.email;
}
}
// ----------------------------------------------------------------------------
function show_comment(){
let comment = document.getElementById('comment');
let selection = null;{
let inputs = comment.getElementsByTagName('input');
for (let i=0, ii=inputs.length; i<ii; i++){
let input = inputs.item(i);
if (input.checked){
selection = input.value;
break;
}
}
}
let n_comment = document.getElementById('n_comment');
let n_comment_error = document.getElementById('n_comment_error');
let n_comment_button = document.getElementById('n_comment_button');
if (!selection)
n_comment_error.textContent = 'Not done';
else if (!n_comment.value.trim())
n_comment_error.textContent = 'Comment missing';
else {
n_comment_error.textContent = '';
n_comment_button.disabled = true;
let post = {
feature: "addComment",
getRequest: {
id: comment.key_id,
urlkey: comment.key_key,
status: selection,
description: n_comment.value
}
}
xhr(
function ok(json){
n_comment_button.disabled = false;
if (json.errorMessages)
n_comment_error.innerHTML = json.errorMessages.join('<br>');
else
n_comment.value = '';
if (json.requests && json.requests[0]){
let request = json.requests[0];
let label = document.getElementById('rootRequest').getElementsByTagName('h3').item(0);
if (label && request.jira_fields && request.jira_fields.description){
label.nextElementSibling.innerHTML = '';
doc2html(request.jira_fields.description, bella.nextElementSibling);
}
}
},
'/api',
JSON.stringify(post),
function err(json){
n_comment_button.disabled = false;
n_comment_error.textContent = 'Sending failed';
}
);
}
}
//OTHER CODES BEFORE NEXT ONES:
//Attachments part
let requestAttachment = document.getElementById('requestAttachment');
if (request.jira_fields && request.jira_fields.attachment)
l_addJiraAttachmentInfo(requestAttachment, request.jira_fields.attachment);
else if (pyynto.attachmentTags)
l_addBufferedAttachmentInfo(requestAttachment, request.attachmentTags);
else
l_addBufferedAttachmentInfo(requestAttachment, []);
} else {
root.innerHTML = 'Didn't find the request';
}
root.parentElement.style.display = 'inline-block';
}
function show_get(id, urlkey){
xhr(
function ok(json){
show_show(json);
},
'/api',
JSON.stringify({
feature: 'get',
getRequest: {
id: id,
urlkey: urlkey
}
}),
function err(json){
let root = document.getElementById('rootRequest');
root.innerHTML = '<b>Download failed</b>';
}
);
}
function show_initLomake(){
let get = getParameters();
let root = document.getElementById('rootRequest');
if (get['id'] && get['idKey']){
root.innerHTML = '<i>Searching...</i>';
show_get(get['id'], get['idKey']);
//Switching page
document.getElementById('v2r').checked = true;
} else {
root.parentElement.style.display = 'none';
}
let requestAttachment = document.getElementById('requestAttachment');
let comment = document.getElementById('comment');
if (typeof l_createForm === 'function' && requestAttachment && comment)
l_createForm(requestAttachment, comment);
else if (comment)
requestAttachment.parentElement.style.display = 'none';
}
function list_sendLink(email){
if (email){
xhr(
function ok(json){
let root = document.getElementById('rootList');
if (json.okMessage)
root.textContent = json.okMessage;
else if (json.errors && json.errors['sendMssage']){
let div = document.createElement('div');
div.textContent = json.errors['sendMessage'];
div.className = 'error';
root.appendChild(div);
} else if (json.errorMessages && json.errorMessages[0]){
let div = document.createElement('div');
div.textContent = json.errorMessages[0];
div.className = 'error';
root.appendChild(div);
} else
root.innerHTML = "Something went wrong. Don't know what or where.";
},
'/api',
JSON.stringify({
feature: 'sendListTag',
newForm: {
email: email
}
}),
function err(json){
let root = document.getElementById('rootList');
let div = document.createElement('div');
div.textContent = 'Sending the request to server failed???';
div.className = 'error';
root.appendChild(div);
}
);
}
}
function list_initShowPrevious(){
let get = getParameters();
let store = s_get();
let root = document.getElementById('rootList');
let mm_list = document.getElementById('mm_list');
let email = get['email'];
let listTag = get['list'];
if (store.email && store.listTag){
s_forgetButton(true);
if (!email || !listag || store.email == email && store.listTag == listTag){
email = store.email;
listTag = store.listTag;
mm_list.innerHTML = 'Email and list tags.';
} else {
mm_list.innerHTML = 'Email and list tag, but they differ!<br><i>If you want to update, you must forget old infos first.</i>';
}
} else if (email && listTag){
s_post(email, listTag);
mm_list.innerHTML = 'Email and list tags (saved now).';
s_forgetButton(true);
} else {
mm_list.innerHTML = 'Nothing';
}
if (email && listTag){
root.innerHTML = '<i>Searching...</i>';
list_get(email, listTag);
if (!get['form'])
document.getElementById('v2r').checked = true;
}
}
// ----------------------------------------------------------------------------
function init(){
//New form?
xhr(
function settingsGot(json){
new_initForm(json);
window._settings = json;
list_initShowPrevious();
show_initForm();
},
'form.new.json',
null,
null
);
}
sentAttachment.js
'use strict';
function l_createForm(root, settingSource){
if (!root || !ss || !ss.SimpleUpload){
console.error("Formatting of downloading attachment file failed.");
} else {
root.a_settingSource = settingSource;
root.a_newTags = [];
{
let sendedFiles = document.createElement('fieldset');
root.e_SendedFiles = sendedFiles;
sendedFiles.className = 'sendedFiles';
let legend = document.createElement('legend');
legend.innerHTML = 'Sended files';
sendedFiles.appendChild(legend);
root.appendChild(sendedFiles);
}
{
let progressBox = document.createElement('div');
root.e_progressBox = progressBox;
progressBox.className = 'progressBox';
root.appendChild(progressBox);
}
{
let key = document.createElement('p');
root.e_key = key;
key.className = 'key';
key.innerHTML = '<span>Drag and drop the files you want to send to the square above</span> ' +
'or <a>click here</a>';
root.e_clicking = key.lastElementChild;
root.appendChild(key);
}
root.e_fileUpload = new ss.SimpleUpload({
button: [root.e_sendedFiles, root.e_clicking],
url: function before(xhr, settings){
let extra = '';
if (settingSource && settingSource.tag_id && settingSource.tag_key)
extra = '/' + settingSource.tag_id + '/' + settingSource.tag_key;
return location.protocol +
'//' + location.host +
'/api?' +
(Date.now()) +
extra
;
},
name: "file",
method: "PUT",
dropzone: root,
dragClass: 'fileOn',
encodeHeaders: true,
cors: false,
multiple: true,
multipleSelect: true,
noParams: true,
multipart: true,
autoSubmit: true,
responseType: "json",
debug: false,
onDone: function sendingPassed(
fileName,//String
statusCode,//the response status code, if any
statusText,//the response status code, if any
json,//false
button,//Button which started sending
fileSize//number or null
){
let sendedFiles = root.e_sendedFiles;
if (sendedFiles){
l_help_addFileToList(
sendedFiles,
fileName,
fileSize,
null,
null
);
if (json && json.attachmentTag)
root.a_newTags.push(json.attachmentTag);
} else {
alert('File "' + fileName + '" sended successfully.');
}
},
onError: function sendingError(
fileName,//String
errorType,//"error" or "parseerror"
statusCode,//the response status code, if any
statusText,//the response status code, if any
answer,//false
button,//Button which started sending
fileSize//number or null
){
alert('"' + fileName + '": ' + statusText);
},
onSubmit: function(filename, extension) {
// Create the elements of our progress bar
var progress = document.createElement('div'), // container for progress bar
bar = document.createElement('div'), // actual progress bar
fileSize = document.createElement('div'), // container for upload file size
wrapper = document.createElement('div'), // container for this progress bar
//declare somewhere: <div id="progressBox"></div> where you want to show the progress-bar(s)
progressBox = root.e_progressBox; //on page container for progress bars
// Assign each element its corresponding class
progress.className = 'progress progress-striped';
bar.className = 'progress-bar progress-bar-success';
fileSize.className = 'size';
wrapper.className = 'wrapper';
// Assemble the progress bar and add it to the page
progress.appendChild(bar);
wrapper.innerHTML = '<div class="name">Sending <b>'+filename+'</b></div>'; // filename is passed to onSubmit()
wrapper.appendChild(fileSize);
wrapper.appendChild(progress);
progressBox.appendChild(wrapper); // just an element on the page to hold the progress bars
// Assign roles to the elements of the progress bar
this.setProgressBar(bar); // will serve as the actual progress bar
this.setFileSizeBox(fileSize); // display file size beside progress bar
this.setProgressContainer(wrapper); // designate the containing div to be removed after upload
}
});
}
}
function l_help_addFileToList(root, name, size, mime, date){
let square = document.createElement('div');
square.className = 'square';
let text = document.createElement('span');
text.className = 'name';
text.innerHTML = name;
square.appendChild(text);
/*
let size = document.createElement('i');
size.className = 'size';
size.innerHTML = size;
square.appendChild(size);
*/
root.appendChild(square);
}
function l_addJiraAttachmentInfo(root, attachment_arr){
if (root.e_sendedFiles && attachment_arr instanceof Array){
root.e_sendedFiles.innerHTML = '';
root.a_newTags = [];
for (let i=0, ii=attachment_arr.length; i<ii; i++){
let a = attachment_arr[i];
l_help_addFileToList(
root.e_sendedFiles,
a.filename,
a.size,
a.mimeType,
a.created
);
}
}
}
function l_addBufferedAttachmentInfo(root, attachmentTags){
if (root.e_sendedFiles && attachmentTags instanceof Array){
root.e_sendedFiles.innerHTML = '';
root.a_newTags = [];
for (let i=0, ii=attachmentTags.length; i<ii; i++){
let a = attachmentTags[i];
l_help_addFileToList(
root.e_sendedFiles,
'Sending_' + a,
-1,
null,
null
);
}
}
}
function l_getSendedTags(root){
if (root.a_newTags)
return root.a_newTags;
else
return null;
}
I am trying to generate a csrf token in javascript and use that with a POST request using fetch.
In my html, I have the following script tag under head to generate the csrf token:
<head>
<script type="text/javascript">
var user = '{{request.user}}'
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
console.log(csrftoken)
</script>
</head>
Then under body, I have the following script tag where I retrieve the csrftoken variable and pass it to the 'X-CSRFToken' header in fetch():
<body>
<script type="text/javascript">
console.log('Hello World')
console.log(csrftoken)
var updateButtons = document.getElementsByClassName('update-cart')
for(i = 0; i < updateButtons.length; i++){
updateButtons[i].addEventListener('click', function(){
var productId = this.dataset.product
var action = this.dataset.action
console.log('productId: ', productId, 'action: ', action)
console.log('user: ', user)
if(user === 'AnonymousUser'){
console.log('Not logged in.')
}else{
updateUserOrder(productId, action)
}
})
}
function updateUserOrder(productId, action){
console.log('User is authenticated. Sending data...')
console.log(csrftoken)
var url = '/update_item/'
fetch(url, {
method: 'POST',
headers: {
'Content-Type':'application/json',
'X-CSRFToken':csrftoken,
},
body: JSON.stringify({'productId': productId, 'action': action})
})
.then((response) => {
return response.json()
})
.then((data) => {
console.log('data: ', data)
})
}
</script>
</body>
The csrftoken variable is displayed by all the console.log() calls but I still get the following exceptions:
(index):169 POST http://127.0.0.1:8000/update_item/ 500 (Internal Server Error)
updateUserOrder
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
views.py,
def update_item(request):
data = json.loads(request.data)
product_id = data['productId']
action = data['action']
print('action: ', action)
print('product_id: ', product_id)
customer = request.user.customer
product = Product.objects.get(id=product_id)
order, created = Order.objects.get_or_create(customer=customer, complete=False)
orderitem, created = OrderItem.objects.get_or_create(order=order, product=product)
if action == 'add':
orderitem.quantity += 1
elif action == 'remove':
orderitem.quantity -= 1
orderitem.save()
if orderitem.quantity <= 0:
orderitem.delete()
return JsonResponse('Item was added.', safe=False)
I cannot seem to figure out whether it is a syntax error or if I am setting the 'X-CSRFToken' header wrong. Other similar answers did not help.
Solved. It was not an issue with my javascript or the csrftoken variable therein. Rather it was in my server code.
In views.py, I typed data = json.loads(request.data). But it should be data = json.loads(request.body).
Hye i am having a little trouble again i am supposed to put a list of questions in airtable and then print them to my screen but i am working with a fetch reqeust en then e method of get but i have the feeling like my empty variable aren't being filled with my questions
its in javascript btw :
here's my code :
; (function (){
window.addEventListener('load', function(){
document.getElementById('next').addEventListener('click', function(){
window.location.href = 'vragenlijst2.html';
})
let vrg1 = document.getElementById('1vraag');
let vrg2 =document.getElementById('2vraag');
let vrg3 = document.getElementById('3vraag');
let vrg4 = document.getElementById('4vraag');
let vrg5 = document.getElementById('5vraag');
let vrg6 = document.getElementById('6vraag');
let vrg7 = document.getElementById('7vraag');
let vrg8 = document.getElementById('8vraag');
let vrg9 = document.getElementById('9vraag');
let vrg10 = document.getElementById('10vraag');
let Vragenlijst_id = 1;
let getData = function(){
fetch('https://api.airtable.com/v0/appojP2iMG4i3P61S/EDBL', {
method: 'GET',
headers: {
'Authorization' : 'Bearer keyDhD8sLGjcEuA4K'
}
})
.then(Response => Response.json())
.then(JSON => {
console.log(JSON)
for(let index = 0; index < JSON.records.length; index++){
let Qstn = JSON.records[index];
if(Vragenlijst_id === Qstn.fields.vragenlijst){
let vrg1_db = Qstn.fields.Vraag1;
let vrg2_db = Qstn.fields.Vraag2;
let vrg3_db = Qstn.fields.Vraag3;
let vrg4_db = Qstn.fields.Vraag4;
let vrg5_db = Qstn.fields.Vraag5;
let vrg6_db = Qstn.fields.Vraag6;
let vrg7_db = Qstn.fields.Vraag7;
let vrg8_db = Qstn.fields.Vraag8;
let vrg9_db = Qstn.fields.Vraag9;
let vrg10_db = Qstn.fields.Vraag10;
vrg1 = vrg1_db;
vrg2 = vrg2_db;
vrg3 = vrg3_db;
vrg4 = vrg4_db;
vrg5 = vrg5_db;
vrg6 = vrg6_db;
vrg7 = vrg7_db;
vrg8 = vrg8_db;
vrg9 = vrg9_db
vrg10 = vrg10_db;
console.log(vrg1);
}
}
})
}
getData();
function create (){
let par = document.createElement('p');
par.innerHTML = vrg1;
document.getElementById('1vraag').appendChild(par);
}
document.getElementById('1vraag').innerHTML = create()
I'm trying to write a code that makes a request to a website, for webscraping
So this are the steps:
Here First part of Code STARTS
The program makes the request to the mainURL
The program selects some objects from the html of the mainURL, and store them in an array of objects(advert), on of the properties of the object, is it's link, which we'll call numberURL, that the code automatically selects using a css selector, the amount of objects is something like 80-90;
The program makes requests to every numberURL(80-90 requests),
and for each of them it does set another properties to the same object, and selects another link, that we'll call accountURL
The program creates an CSV file where it writes every object in different rows
Here First part of Code ENDS
So actually the first part works pretty good, it doesn't have any issues, but the second part does
Here Second part of Code STARTS
The program makes requests to every accountURL from the previous object
The program selects some objects from the html of the accountURL, and stores them in an another array of another objects(account), also using CSS selectors
The program should console.log() all the account objects
Here Second part of Code ENDS
But the second part does have some bugs, because when console.logging the objects we see that the objects properties doesn't changed their default value.
So in debugging purposes I took one advert object and putted it's value manually from the code
post[0].link = 'https://999.md/ru/profile/denisserj'
Finally when running the code for this object it actually works correctly, so it shows the changed properties, but for the rest of them it doesn't.
I tried to set some Timeouts, thinking that the code tries to read the link, before the second request finished, but no effects
I also tried to console.log the link, to see if it exists in the array, so it actually exists there, but also no effect.
Finally here is the code:
// CLASSES
class advert {
constructor() {
this.id = 0;
this.tile = new String();
this.link = new String();
this.phone = new String();
this.account = new String();
this.accountLink = new String();
this.text = new String();
this.operator = new String();
}
show() {
console.log(this.id, this.title, this.link, this.phone, this.account, this.accountLink, this.text, this.operator);
}
}
class account {
constructor() {
this.name = 0;
this.createdAt = 0;
this.phone = [];
this.ads = [];
this.adsNumber = 0;
}
show() {
console.log(this.name, this.createdAt, this.phone, this.ads, this.adsNumber);
}
}
// HEADERS
const mainRequest = require('request');
const auxRequest = require('request');
const cheerio1 = require('cheerio');
const cheerio2 = require('cheerio');
const fs = require('fs');
const fs2 = require('fs');
const adFile = fs.createWriteStream('anunturi.csv');
const accFile = fs2.createWriteStream('conturi.csv');
// SETTINGS
const host = 'https://999.md'
const category = 'https://999.md/ru/list/transport/cars'
const timeLimit = 60; //seconds
// VARIABLES
let post = [];
let postNumber = 0;
let acc = [];
// FUNCTIONS
function deleteFromArray(j) {
post.splice(j, 1);
}
function number(i) {
let category = post[i].link;
auxRequest(category, (error, response, html) => {
if (!error && response.statusCode == 200) {
const $ = cheerio1.load(html);
let phone;
const siteTitle = $('strong').each((id, el) => {
phone = $(el).text();
});
const txt = $('.adPage__content__description').html();
const person = $('.adPage__header__stats').find('.adPage__header__stats__owner').text();
const linkToPerson = host + $('.adPage__header__stats').find('.adPage__header__stats__owner').find('a').attr('href');
post[i].phone = phone;
post[i].account = person;
post[i].accountLink = linkToPerson;
post[i].text = txt;
if (i == postNumber) {
console.log('1. Number Putting done')
writeToFileAd(accountPutter, writeToFileAccount);
}
}
});
}
function writeToFileAd() {
adFile.write('ID, Titlu, Link, Text, Cont, LinkCont, Operator\n')
for (let i = 0; i <= postNumber; i++) {
adFile.write(`${post[i].id}, ${post[i].title}, ${post[i].link}, ${post[i].phone}, ${post[i].account}, ${post[i].accountLink}, ${post[i].operator}\n`);
}
console.log('2. Write To File Ad done')
accountPutter();
}
function accountAnalyzis(i) {
let category = post[i].link;
const mainRequest = require('request');
category = category.replace('/ru/', '/ro/');
mainRequest(category, (error, response, html) => {
if (!error && response.statusCode == 200) {
const $ = cheerio2.load(html);
const name = $('.user-profile__sidebar-info__main-wrapper').find('.login-wrapper').text();
let createdAt = $('.date-registration').text();
createdAt = createdAt.replace('Pe site din ', '');
const phones = $('.user-profile__info__data').find('dd').each((id, el) => {
let phone = $(el).text();
acc[i].phone.push(phone);
});
const ads = $('.profile-ads-list-photo-item-title').find('a').each((id, el) => {
let ad = host + $(el).attr('href');
acc[i].ads.push(ad);
acc[i].adsNumber++;
});
acc[i].name = name;
acc[i].createdAt = createdAt;
console.log(name)
if (i == postNumber) {
console.log('3. Account Putting done')
writeToFileAccount();
}
}
});
}
function writeToFileAccount() {
for (let i = 0; i <= postNumber; i++) {
accFile.write(`${acc[i].name}, ${acc[i].createdAt}, ${acc[i].phone}, ${acc[i].ads}, ${acc[i].adsNumber}\n`);
}
console.log('4. Write to file Account done');
}
function numberPutter() {
for (let i = 0; i <= postNumber; i++) {
number(i);
}
}
function accountPutter() {
for (let i = 0; i <= postNumber; i++) {
accountAnalyzis(i);
}
}
// MAIN
mainRequest(category, (error, response, html) => {
let links = [];
for (let i = 0; i < 1000; i++) {
post[i] = new advert();
}
for (let i = 0; i < 1000; i++) {
acc[i] = new account();
}
if (!error && response.statusCode == 200) {
const $ = cheerio2.load(html);
const siteTitle = $('.ads-list-photo-item-title').each((id, el) => {
const ref = host + $(el).children().attr('href');
const title = $(el).text();
post[id].id = id + 1;
post[id].title = title;
post[id].link = ref;
links[id] = ref;
postNumber = id;
});
post[0].link = 'https://999.md/ru/profile/denisserj'
numberPutter()
}
});
You have an error in line
const siteTitle = $('.ads-list-photo-item-title').each((id, el) => {
What you actually want is .find('a').each...