How to retrieve the image of an RSS Feed? - javascript

I created a JS code, but cannot retrieve the url of the images from my RSS Feed.
How to retrieve the image of an RSS Feed ?
const FEED_URL = https://www.s1biose.com/fr/test/rss.xml;
fetch(FEED_URL)
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => {
const items = data.querySelectorAll("item");
let html = ``;
items.forEach(el => {
html += `
<div class="card mb-3 text-start position-relative text-dark">
<div class="row g-0">
<div class="col-md-4">
<img src="${el.querySelector("enclosure").innerHTML}" alt="${el.querySelector("title").innerHTML}">
</div>
<div class="col-md-8">
<div class="card-body">
<div class="card-title h5">${el.querySelector("title").innerHTML}</div>
<p class="card-text">${el.querySelector("description").innerHTML}</p>
<p class="card-text"><small class="text-muted">${el.querySelector("pubDate").innerHTML}</small></p>
</div>
</div>
</div>
</div>
`;
});
document.querySelector('#feed').insertAdjacentHTML("beforeend", html);
});

Related

JS: replace is not replacing information

I am programming an action where after a button press, games on the platform "console" or "pc" is shown. I would like it when the button for "pc" is pressed first, all pc games are shown. And after when the "console" button is pressed, all "pc" games are removed and then all "console" games are appended
code for the buttons is this:
<button class="btn btn-success" type="submit" onclick="searchPC()">PC</button>
<button class="btn btn-success" type="submit" onclick="searchCon()">Console</button>
code for the function is similar across the two buttons;
function searchPC() {
$("search").replaceWith(`<div></div>`);
axios
.get(`${baseUrl}/game/PC`)
.then((response) => {
const posts = response.data;
console.log(posts);
posts.forEach((post) => {
const postPHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").replaceWith(postPHtml);
});
})
.catch((error) => {
console.log(error);
});
}
What I have attempted is to replace any info with an empty div, then adding the desired information, however, it still shows the older information (referring to above, "pc" is still shown even after pressing "console".
Furthermore, I have more than 1 card to add, ie there are >2 sets of information for console and pc games
original file with js included is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Friendbook</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class='bg-dark'>
<div class="container-fluid bg-dark">
<div class="">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<div>
<img src="http://localhost:8082/images/image.jpg" alt="logo" style="width:40px;" id="logo">
</div>
</a>
<a class="nav-link" href="/">Home</a>
<button class="btn btn-success" type="submit" onclick="searchPC()">PC</button>
<button class="btn btn-success" type="submit" onclick="searchCon()">Console</button>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark mt-1">
<form class="form-inline ml-2" action="/action_page.php">
<input class="form-control" id='searchP' type="text" placeholder="Search by Price">
<button class="btn btn-success" type="submit">Search</button>
</form>
<form class="form-inline ml-2" action="/action_page.php">
<input class="form-control" id='searchN' type="text" placeholder="Search by Name">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
<div class="row" style="margin-top: 2rem;">
</div>
</div>
<div class="card" style="margin-top: 2rem;">
<div class="card-body col-md-10">
<h4 class='title '>Search Games</h4>
<div id="search" class="container-fluid md-6 sm-6">
</div>
</div>
</div>
<div class="card" style="margin-top: 2rem;">
<div class="card-body col-md-10">
<h4 class='title '>All Games</h4>
</div>
</div>
<div class="row" style="margin-top: 2rem;">
<div class="col-md-11 col-xs-12 ml-5">
<div id="posts" class="container-fluid md-6 sm-6">
</div>
</div>
</div>
</div>
<footer class='bg-dark p-3'>
<div class='ml-2 mt-2'>
<form>
<button class="btn btn-success" type="submit" onclick="logout()">logout</button>
</form>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const baseUrl = "http://localhost:8081";
const token = localStorage.getItem("token");
const loggedInUserID = parseInt(localStorage.getItem("loggedInUserID"));
if (token === null /* || isNaN(loggedInUserID) */) {
window.location.href = "/login/";
} else {
axios.get(`${baseUrl}/gameall/all`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#posts").append(postHtml);
});
})
.catch((error) => {
console.log(error);
});
/*
axios.get(`${baseUrl}/game/console/`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
${post.description}
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
<p class="card-text">${post.price}</p>
</div>
</div>
`;
$("#posts").append(postHtml);
});
})
.catch((error) => {
console.log(error);
});*/
//acts as addpost api
$("#create-post-form").submit((event) => {
// prevents the page from refreshing
event.preventDefault();
const requestBody = {
text_body: $("#create-post-form-body").val(),
fk_poster_id: loggedInUserID
};
// create the post
axios.post(`${baseUrl}/posts/`, requestBody)
.then((response) => {
// reset form value.
$("#create-post-form-body").val("");
// fetch the post with the returned postID
axios.get(`${baseUrl}/posts/${response.data.postID}`)
.then((response) => {
const post = response.data;
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body sm-6">
<p class="card-text">${post.text_body}</p>
</div>
<div class="card-footer text-muted">
${post.created_at}
</div>
</div>
`;
$("#posts").append(postHtml);
})
.catch((error) => {
console.log(error);
});
});
});
}
function logout() {
localStorage.removeItem('token')
localStorage.removeItem('role')
localStorage.removeItem('id')
}
function searchPC() {
axios.get(`${baseUrl}/game/PC`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postPHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").appendChild(postPHtml);
});
})
.catch((error) => {
console.log(error);
});
}
function searchCon() {
axios.get(`${baseUrl}/game/console`)
.then((response) => {
const posts = response.data;
posts.forEach((post) => {
const postCHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").appendChild(postCHtml);
});
})
.catch((error) => {
console.log(error);
});
}
</script>
</body>
</html>```
I think you need to use **html(htmlString) **
Description: Set the HTML contents of each element in the set of matched elements
replace $("#search").replaceWith(postPHtml);
with $("#search").html(postPHtml);
see:https://api.jquery.com/html/

How to refresh the table after button click in ajax call

I'm creating a script that retrieves data from api. everything was successful, but when I wanted to enter another film title it didn't want to refresh the existing data but added new data to the previous data.
function loadContent() {
let $ = jQuery;
let id = $('#titless').val();
var url = "https://api.themoviedb.org/3/search/movie?api_key=b97618b9d94f7f1090189b207f83ce52&language=en-US&query=" + id + "&page=1&include_adult=false";
fetch(url)
.then(res => res.json())
.then(data => {
$.each(data.results, function(i, item) {
$('#atas').each(function() {
$('<div />', {
'class': 'col-md-2 my-2 mx-2 align-center',
'id': 'yaa',
'style': 'border: solid;',
// 'html' : ``,
'html': [
`<img class="card-img-top" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/${data.results[i].poster_path}">
<h3 class="title">${data.results[i].title}</h3>
<h1 class="title">${data.results[i].id}</h1>
`
],
appendTo: this
})
});
});
});
}
this is my html script
<div class="container">
<h1 class="mt-4">Punten</h1>
<div class="row">
<div class="col bg-dark">
<div class="row">
<div class="col my-4 d-flex justify-content-container">
<input type="text" class="form-control" id="titless">
<button type="submit" class="btn btn-primary ml-4" onclick="loadContent()">Submit</button>
</div>
</div>
<div class="col mb-5">
<div class="card">
<div id="atas" class="card-body row">
</div>
</div>
</div>
</div>
</div>
</div>
You just need to clear the previous content with empty
Also, you don't need the each method over #atas since it's a unique element, just append your new elements like this: $('#atas').append(newElement);
function loadContent() {
let $ = jQuery;
let id = $('#titless').val();
var url = "https://api.themoviedb.org/3/search/movie?api_key=b97618b9d94f7f1090189b207f83ce52&language=en-US&query=" + id + "&page=1&include_adult=false";
fetch(url)
.then(res => res.json())
.then(data => {
/* SOLUTION */
$('#atas').empty();
$.each(data.results, function(i, item) {
$('#atas').append(
$('<div />', {
'class': 'col-md-2 my-2 mx-2 align-center',
'id': 'yaa',
'style': 'border: solid;',
// 'html' : ``,
'html': [
`<img class="card-img-top" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/${data.results[i].poster_path}">
<h3 class="title">${data.results[i].title}</h3>
<h1 class="title">${data.results[i].id}</h1>
`
]
})
);
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1 class="mt-4">Punten</h1>
<div class="row">
<div class="col bg-dark">
<div class="row">
<div class="col my-4 d-flex justify-content-container">
<input type="text" class="form-control" id="titless">
<button type="submit" class="btn btn-primary ml-4" onclick="loadContent()">Submit</button>
</div>
</div>
<div class="col mb-5">
<div class="card">
<div id="atas" class="card-body row">
</div>
</div>
</div>
</div>
</div>
</div>

How to retain the border of selected bootstrap cards even on page refresh?

I am having 6 bootstrap cards now I wrote code for storing the every card details in the local storage and also on click the card will get a border now I want is on page refresh I should retain the border of the card
My html code is:
<div class="row">
<div class="col-4" onclick="getGoal(1)">
<div class="card4 mt-3" id="room_1" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_1"><b>I am redecorating</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(2)">
<div class="card4 mt-3" id="room_2" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_2"><b>I am Moving</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(3)">
<div class="card4 mt-3" id="room_3" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_3"><b>I need help with a layout</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(4)">
<div class="card4 mt-3" id="room_4" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_4"><b>I am looking for a species</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(5)">
<div class="card4 mt-3" id="room_5" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_5"><b>I am moving with someone</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(6)">
<div class="card4 mt-3" id="room_6" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_6"><b>Other</b></p>
</div>
</center>
</div>
</div>
</div>
<!--Loop ends-->
<a class="link mt-3"><u>Dont see your room?</u></a>
<div class="row mb-3">
<div class="col-4 mr-5">
« Home
</div>
<div class="col-4 ml-5">
Next »
</div>
</div>
My JS code:
$(document).ready(function(){
// goals
$("#room_1").click(function(){
$("#room_1").toggleClass("blue");
});
$("#room_2").click(function(){
$("#room_2").toggleClass("blue");
});
$("#room_3").click(function(){
$("#room_3").toggleClass("blue");
});
$("#room_4").click(function(){
$("#room_4").toggleClass("blue");
});
$("#room_5").click(function(){
$("#room_5").toggleClass("blue");
});
$("#room_6").click(function(){
$("#room_6").toggleClass("blue");
});
$("#room_7").click(function(){
$("#room_7").toggleClass("blue");
});
$("#room_8").click(function(){
$("#room_8").toggleClass("blue");
});
$("#room_9").click(function(){
$("#room_9").toggleClass("blue");
});
});
var goal = [];
var goalIds = [];
function getGoal(id) {
if (goal.length > 0) {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data)
var index = goal.indexOf(x)
if (index == -1) {
goal.push(x);
} else {
goal.splice(index, 1);
}
} else {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data);
goal.push(x);
}
localStorage.setItem("goal", JSON.stringify(goal));
goalIds = goal.map(element => JSON.parse(element).id);
console.log(goalIds);
issample();
}
function issample() {
$("#goal").val(goalIds);
console.log(goalIds);
}
function initGoals() {
var storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
goalIds = storedNames.map(element => JSON.parse(element).id);
}
My codepen link is: https://codepen.io/lakshmi123__/pen/xxbzwNP
function initGoals() {
goal = JSON.parse(localStorage.getItem("goal") || '[]');
goalIds = goal.map(element => JSON.parse(element).id);
goalIds.forEach(function(i){$("#room_"+i).addClass('blue');});
}
initGoals();
but event then, you are filling your goalIds variable right with that function,but you are forgetting to fill the goal variable too ;)

my event dispatch run just one time when form is submit in svelte js, why?

My code is fetch data and put it in card ok, my event is when i add data in input move it to
a fetching data in card, this is run just one more, when i add more, data added in database but it does not move in data list?
code is:
Taskform.svelte
<script>
import { createEventDispatcher } from "svelte";
let title = '';
let dispatch = createEventDispatcher();
function addTask(){
axios.post('./api/tasks', {title: title});
dispatch('taskCreated', {
title: title,
});
title = '';
}
</script>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card mt-2 bg-dark text-light">
<div class="card-header">Create Task</div>
<div class="card-body">
<form action="./api/tasks" method="POST" on:submit|preventDefault={addTask}>
<div class="form-group">
<input type="text" name="title" placeholder="Task Title" class="form-control" bind:value={title}>
</div>
<div class="form-group">
<input type="submit" value="Add Task" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
Tasklist
<script>
import { onMount } from 'svelte';
import Task from './Task.svelte';
let tasks = [];
onMount(async (event) => {
axios.get('./api/tasks')
.then((response) => {
tasks = response.data;
});
});
function handler(event){
tasks = [...tasks, {
title: event.detail.title
}];
}
</script>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card mt-2 bg-primary text-light">
<div class="card-header">List Of Tasks</div>
<div class="card-body">
<ul>
<div class="row">
{#each tasks as task (task.id)}
<div class="col-3">
<li>{task.title}</li>
</div>
{/each}
</div>
</ul>
</div>
</div>
</div>
</div>
<Task on:taskCreated={handler}/>
please help i tried so many ways, nothing worked .
thanks
Your dispatch is called as expected.
The issue is related to the lack of id in your tasks. If you'll add a unique id to each task it would all work (you can remove the (task.id) in your #each to verify).

Bootstrap Rows in ReactJS

I am working with a reactJS app and have the following code:
renderProductBlock(product, index) {
return (
<div className="product col-xs-4">
<span className="product-name">{product.name}</span>
<span className="product-price">{product.price}</span>
Buy Now
</div>
);
}
renderProductList() {
let blocks = [];
_.forEach(product, (item, index) => {
const productBlock = this.renderProductBlock(item, index);
if(productBlock) {
blocks.push(productBlock);
}
});
return blocks;
}
render() {
const productsBlock = this.renderProductList();
if(productsBlock) {
return (
<div className="products">
<div className="row">
{productsBlock}
</div>
</div>
)
}
}
Which is outputting HTML in this layout:
<div class="products">
<div class="row">
<div class="product col-xs-4">
Content
</div>
<div class="product col-xs-4">
Content
</div>
<div class="product col-xs-4">
Content
</div>
<div class="product col-xs-4">
Content
</div>
<div class="product col-xs-4">
Content
</div>
</div>
</div>
What would be the best way for me to add bootstrap rows into these loops to wrap every 3 products in a row div like so:
<div class="products">
<div class="row">
<div class="product col-xs-4">
Content
</div>
<div class="product col-xs-4">
Content
</div>
<div class="product col-xs-4">
Content
</div>
</div>
<div class="row">
<div class="product col-xs-4">
Content
</div>
<div class="product col-xs-4">
Content
</div>
</div>
</div>
Sorry for the slightly simple question but I can't seem to get this right.
Would just keep track of the how many blocks have been processed within the loop and once three blocks are rendered, group them in a row:
renderRow() {
return (
<div class="row">
{block}
</div>
);
}
renderProductList() {
let blocks = [], rows = [];
_.forEach(product, (item, index) => {
const productBlock = this.renderProductBlock(item, index);
if (productBlock) {
blocks.push(productBlock);
}
if (block.length >= 3) {
const row = this.renderRow(blocks);
if (row) {
rows.push(row);
}
blocks = [];
}
});
const row = this.renderRow(blocks);
if (row) {
rows.push(row);
}
return rows;
}

Categories