We Keep Coding

How do I make images from this waifu API appear on page?

I've been stuck on this Waifu API for a bit now and want to ask for help.
I can get the JSON tags in the console and from there I'm able to navigate, click on the image, and see it. But I'm having trouble formatting it on the page with each click.
I know it's a stupid question, I just wanna make my friends at work laugh but also LEARN WHY IT ISN'T WORKING. :/
thank you for your time
<!-- ---waifuthingy----- -->
<div id="waifuContainer" class="container mt-5 text-center">
<h1 class="display-5 text-warning" id="dadJokeFont">Click for waifu:</h1>
<button id="waifuButton" class="btn btn-warning mt-5">uWu</button>
<div id="waifuImage" >
<img id="waifus" src="" alt=""> </div>
</div>
<!-- ----letmebe---- -->
// Waifu Image API
const waifuImage = document.querySelector('#waifuImage');
const waifuButton = document.querySelector('#waifuButton');
const makeImages = (waifus) => {
for(let result of waifus) {
const img = document.createElement('IMG');
img.src.url = result.show.image.medium;
document.body.append(img);
}
}
waifuButton.addEventListener('click', () => {
fetch('https://api.waifu.im/random')
.then(res => res.json())
.then(res => {
console.log(res.images)
waifuImage.src = res.url;
waifus = waifuImage;
})
.catch(err=>console.log(err))
})

Issues:
You are trying to set the src on the div rather than img
You are trying to set res.url, But the res doesn't have a URL. URL is in res.images[0].url.
const waifuImage = document.querySelector('#waifus');
const waifuButton = document.querySelector('#waifuButton');
const makeImages = (waifus) => {
for (let result of waifus) {
const img = document.createElement('IMG');
img.src.url = result.show.image.medium;
document.body.append(img);
}
}
waifuButton.addEventListener('click', () => {
fetch('https://api.waifu.im/random')
.then(res => res.json())
.then(res => {
waifuImage.src = res.images[0].url;
})
.catch(err => console.log(err))
})
#waifus {
width: 100%;
object-fit: contain;
}
<div id="waifuContainer" class="container mt-5 text-center">
<h1 class="display-5 text-warning" id="dadJokeFont">Click for waifu:</h1>
<button id="waifuButton" class="btn btn-warning mt-5">uWu</button>
<div id="waifuImage">
<img id="waifus" src="" alt="">
</div>
</div>

How to manipulate div class on rendered element using map() javascript

How do I use javascript to add class=open into rendered <div class="card flex-row"> using map().
On the inspect element browser i see the reaction on click but that action didn't adding the determined class
Here is my code :
function fetchingData() {
fetch("http://localhost:3001/quote/sendquote")
.then((response) => {
if (!response.ok) {
throw Error;
}
return response.json();
})
.then((data) => {
console.log(data);
const rend = data.person
.map((data) => {
return `
<div class='card flex-row'>
<img src='https://png.pngtree.com/png-vector/20191023/ourlarge/pngtree-user-vector-icon-with-white-background-png-image_1849343.jpg' class='book'>
<div class='flex-column info'>
<div class='title' id="person">Dear ${data.frstname}</div>
<div class='author'></div>
<div class='hidden bottom summary'>
<input id="quote" type="text" value="">
</div>
</div>
<div class='flex-column group'>
<div class='members'>
<span class='current'>14</span> /
<span class='max'>30</span>
</div>
<div class='hidden bottom'>
<button class='simple'>Submit</button>
</div>
</div>
</div>`;
})
.join("");
console.log(rend);
document.querySelector(".center").insertAdjacentHTML("afterbegin", rend);
})
.catch((err) => {
console.log("rejected", err);
});
}
fetchingData();
<div class='container'>
<div class='center list flex-column'>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
let old = $(".card").get(0);
$(".card").click(function() {
if (old != null && $(old).hasClass("open")) $(old).toggleClass("open");
$(this).toggleClass("open");
old = this;
});
</script>
<script>
</script>

JavaScript ajax didn't working.Where am I going wrong?

<div class="media-bottom">
#Html.TextAreaFor(model => model.Message, new { #class = "ui form", #rows = "5", #maxlenght = "300", #placeholder = "Paylaşmak istedikleriniz" })
</div>
<br />
<div class="footer-logo">
<button class=" mini ui right labeled right floated icon button" id="Button_Click" onclick="javascript: Button_Click();">
<i class="right arrow icon"></i>
Paylas
</button>
<div class="container bootstrap snippets bootdey downlines">
<div class="row">
<div class="col-md-6 col-xs-12">
<section class="widget">
<div class="widget-body">
<div class="widget-top-overflow windget-padding-md clearfix bg-info text-white">
</div>
<div class="post-user mt-n-lg">
<span class="thumb-lg pull-left mr media-object">
<img class=" img-circle" src="https://bootdey.com/img/Content/user_3.jpg" alt="...">
</span>
<span class="thumb-lg pull-right mr star">
<img src="~/Content/img/star.png" />
</span>
<div class="Thanksicon">
</div>
<div class="namespace">
<h5 class="mt-sm fw-normal text-black txt post">
#Html.DisplayFor(model => model.FullName)
<br />
<small class="text-black text-light departmen post">#Html.DisplayFor(model => model.Departmen)</small>
</h5>
</div>
</div>
<br />
<br />
<div class="text-light fs-mini m" id="Label1">
<div id="label1">
<p class="article">
#Html.DisplayTextFor(model=>model.Message)
</p>
</div>
<div class="thanksnames">
<span class="thumb-xs avatar mr-sm">
<img class="img-circle thank" src="https://bootdey.com/img/Content/user_2.jpg" alt="...">
</span>
<div class="mt-sm fw-normal text-black " id="person"> <small class="text-black text-light">Rose Tyler</small></div>
</div>
<br />
<div class="img"></div>
<div class="fs-mini text-muted text-right"><time class="time-table-top"></time></div>
</div>
</div>
</section>
</div>
</div>
</div>
This is my javascript
$(function () {
$('#Button_Click').on('click', function () {
$.ajax({
type: "POST",
url: '#Url.Action("Share")',
data: {
fullname: $("#username").val(),
departmen: $("#departmen").val(),
textarea: $(".ui.form").val()
},
datatype: "json",
success: function (data) {
$('.downlines').html(result);
}, error: function (data) {
}
});
});
});
This is my controller httppost
[HttpPost]
private JsonResult Share(SocialMedia data,string id)
{
var employee = _employeeRepository.GetById(id);
ViewBag.IsOwner = id == Session.GetEmployeeNo();
if (Session["MediaList"] == null)
{
Session["MediaList"] = new List<SocialMedia>();
}
var fullname = data.FullName;
var departmen = data.Departmen;
var textarea = data.Message;
foreach (MediaList list in data.MediaLists)
{
list.FullName = fullname;
list.Departmen = departmen;
list.Message = textarea;
list.Date = DateTime.Now.ToLocalTime();
if(data.Photo!=null)
{
list.Photo = data.Photo;
string fileName = Path.GetFileNameWithoutExtension(list.Photo);
list.Photo = "~/Image/" + fileName;
string _path = Path.Combine(Server.MapPath("~/Image/"),fileName);
}
}
return Json(new { data = PartialView("~/Views/SocialMedia/DisplayTemplates/MediaList.cshtml") });
// return PartialView("~/Views/SocialMedia/DisplayTemplates/MediaList.cshtml",
//return Json(new { success = true, message = GlobalViewRes.CreatedSuccessfully }, JsonRequestBehavior.AllowGet);
}
When I write an article and press the button, I want the page to appear below without refreshing and I want it to be repeated. It should be with the whole design. But when I press the button, I made ajax, but my ajax does not work, where am I going wrong?
Sorry for my English:)

success: function (data) {
$('.downlines').html(result);
}, error: function (data) {
}
You handle the data named 'data'. Then you are trying use it like 'result'. What is result, where is it came from? Whatever, try this
$('.downlines').html(data)

Uncaught TypeError: deleteButton is not a function at HTMLButtonElement.onclick

I need to add a Delete button on my cards, and this is the error I get.

Try moving the deleteButton() function outside of the getComments() function.
function getComments() {
fetch(commentsUrl, { method: "GET" })
.then((res) => res.json())
.then((data) => {
data.forEach(function (post) {
const randomId = Math.random().toString().substr(2, 8);
const comment = document.createElement("div");
comment.innerHTML = `
<div class="card" id="${randomId}">
<div class="card text-center bg-info" style="width: 18rem;">
<div class="card-body ">
<h5 class="card-user ">${post.user}</h5>
<h6 class="card-id mb-2 text-muted">Id: ${post.id}</h6>
<p class="card-content">"${post.content}" </p>
<p class="card-date">${post.date}<p>
<button type="button" class="btn btn-primary btn-sm">Edit</button>
<button type="button" class="btn btn-danger btn-sm" id="deleteButton" onclick="deleteButton('${randomId}')">Delete</button>
</div>
</div>
</div>`;
document.getElementById("content").append(comment);
});
});
}
function deleteButton(id) {
var del = document.getElementById(id);
del.remove();
}
window.onload = getComments();
Functions in Javascript create a scope so functions defined within functions can only be called within that function.
You are creating a HTML element, which will try to call deleteButton() from the global scope and doesn't have access to the function declaration within getComments().
EDIT: fixed some more code

This is how it was asked to be done..
I find it above my knowledge, but in case anybody is curios, I thought I could share it.
const commentsUrl = "http://localhost:8080/comments";
let comments = [];
function getComments() {
fetch(commentsUrl, { method: "GET" })
.then((res) => res.json())
.then((data) => {
comments = data;
renderComments(comments);
});
}
const renderComments = (comments) => {
const commentsContainer = document.getElementById("content");
commentsContainer.innerHTML = "";
comments.forEach(function (post) {
const comment = document.createElement("div");
comment.innerHTML = `
<div id=${post.id} class="card">
<div class="card text-center bg-info" style="width: 18rem;">
<div class="card-body ">
<h5 class="card-user ">${post.user}</h5>
<h6 class="card-id mb-2 text-muted">Id: ${post.id}</h6>
<p class="card-content">"${post.content}" </p>
<p class="card-date">${post.date}<p>
<button type="button" class="btn btn-primary btn-sm">Edit</button>
<button type="button" class="btn btn-danger btn-sm" id="deleteBtn" onclick='remove(${post.id})'>Delete</button>
</div>
</div>
</div>`;
commentsContainer.append(comment);
});
};
function remove(id) {
fetch(`${commentsUrl}/${id}`, { method: "DELETE" }).then((comment) => {
const index = comments.findIndex(
(currentComment) => currentComment.id === comment.id
);
comments.splice(index - 1, 1);
renderComments(comments);
});
}
getComments();

Infinite loop VueJS API calls

I got infinite api calls when this method setCurrentDateFilter called after clicking on radio button. It looks like my filtered list rerenders every time because of reactivity. But actually i don't understand the reason why. Everything was fine before i did this additional api call on button click.
index.html partially
<div class="row align-items-center justify-content-center">
<b-form-group>
<b-form-radio-group buttons v-model="selected_date" :change="setCurrentDateFilter()" name="date_filter">
<b-form-radio value="today" button-variant="outline-success">Сегодня</b-form-radio>
<b-form-radio value="tomorrow" button-variant="outline-success">Завтра</b-form-radio>
<!-- <b-form-radio value="specific" button-variant="outline-success" disabled>Выбрать дату</b-form-radio> -->
</b-form-radio-group>
</b-form-group>
</div>
<div class="container">
<div class="section-top-border" v-for="(event, i) in filteredEvents" :key="event.id">
<div class="row">
<div class="col-md-6">
<div class="country">
<div class="grid">
<div class="row">
<div class="col-sm-3 event date">{{event.start_date.day}}</div>
<div class="col-sm-6 event month">{{event.start_date.month}}</div>
</div>
<div class="row event">
<div class="col-sm-1">{{event.start_date.time}} </div>
<div class="col-sm-11" v-if="event.place"> 📌 {{event.place.name}} </div>
</div>
</div>
</div>
</div>
</div>
<h3 class="mb-30">{{event.title}}</h3>
<div class="row">
<div class="col-md-3">
<b-img v-bind:src="event.poster_link" alt="" width="200" height="200" fluid>
</div>
<div class="col-md-9 mt-sm-20">
<p>{{event.short_description}}</p>
<b-btn variant="outline-success" v-on:click="currentEvent=event;modalShow=true"> 👁 Подробнее</b-btn>
</div>
</div>
</div>
main.js
var app = new Vue({
el: '#app',
data: {
api: 'http://127.0.0.1:8000/api/events',
show: true,
events: [],
currentEvent: Object,
modalShow: false,
loading: true,
errored: false,
selected_filter: ["1", "2", "3"],
selected_date: "today",
},
computed: {
filteredEvents() {
var sel_filter = this.selected_filter
var objs = this.events.filter(function(event) {
return sel_filter.indexOf(event.type.id.toString()) >= 0
})
console.log(objs.length, sel_filter)
return objs;
}
},
mounted() {
this.getEventsFromServer();
},
methods: {
getEventsFromServer(date = (new Date).toString()) {
axios
.get(this.api)
.then(response => {
this.events = handleResponse(response)
})
.catch(error => {
console.log(error);
this.errored = true;
})
.finally(() => (this.loading = false));
},
setCurrentDateFilter: function(e) {
console.log(e)
console.log(this.selected_date)
this.getEventsFromServer();
},
},
filters: {}
})
function handleResponse(response) {
var events = []
for (let i = 0; i < response.data.length; i++) {
let e = response.data[i]
let start_date = new Date(e.start_date)
let el = {
start_date: {
day: start_date.getDate(),
time: start_date.getHours() + ":" + (start_date.getMinutes() < 10 ? '0' : '') + start_date.getMinutes(),
month: getMonthWord(start_date)
},
title: e.id,
title: e.title,
description: e.description,
short_description: e.short_description,
poster_link: e.poster_link,
source_link: e.source_link,
type: getStyledType(e.type),
phone: e.phone,
email: e.email,
place: e.place
}
events.push(el)
}
return events;
}