Develop Reference

How to update inner html of an html element using data from json?

I'm making a quiz app, and for the answers, I'm trying to display the name of the answers together with the images of the answer choices from my json data. However, I get this error: Uncaught TypeError: Cannot set properties of null (setting 'src') when I try to set the image as:
image1.src = quiz[0].questions[question_id].answers[0].img_url;
Does anybody have any idea as to how I can make this work? It is worth noting that the image is displayed when the image tag is not nested in the label tag, and on its own in the div. You can uncomment this line of the html( <img id="ans1-img" src="" alt=""> ) to see it work
window.onload=function(){
const quiz = [{
questions: [
{
question_id : 0,
question_name: "Which rapper is Beyoncé married to?",
"question_img_url": "img/question1.jpg",
answers: [
{
"text": "Kanye West",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
// "img_url": "../assets/quiz-imgs/kanye.webp",
"outcome": "outcome2",
},
{
"text": "Jay Z",
// "img_url": "../assets/quiz-imgs/jayz.webp",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "Lil Wayne",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
// "img_url": "../assets/quiz-imgs/lilwayne.webp",
"outcome": "outcome1",
},
{
"text": "Drake",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
// "img_url": "../assets/quiz-imgs/drake.jpeg",
"outcome": "outcome1",
},
]
},
{
question_id : 1,
question_name: "Before she married Prince Harry, Meghan Markle was on a TV show that ran from 2011 to 2019. What’s the name of that TV show?",
"question_img_url": "img/question1.jpg",
answers: [
{
"text": "Suits",
"img_url": "../assets/quiz-imgs/suits.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "Game of Thrones",
"img_url": "../assets/quiz-imgs/got.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "You",
"img_url": "../assets/quiz-imgs/you.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome1",
},
{
"text": "90210",
"img_url": "../assets/quiz-imgs/90210.webp",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
]
},
{
question_id : 2,
question_name: "Who did Forbes name the youngest “self-made billionaire ever” in 2019?",
"question_img_url": "img/question1.jpg",
answers: [
{
"text": "Rihanna",
// "img_url": "../assets/quiz-imgs/riri.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "Kylie Jenner",
// "img_url": "../assets/quiz-imgs/kylie.webp",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
{
"text": "Mark Zuckerberg",
// "img_url": "../assets/quiz-imgs/mark.jpeg",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome1",
},
{
"text": "Kim Kardashian",
// "img_url": "../assets/quiz-imgs/kimk.webp",
"img_url": "https://media.gq.com/photos/5ad93798ceb93861adb912d8/16:9/w_2560%2Cc_limit/kanye-west-0814-GQ-FEKW01.01.jpg",
"outcome": "outcome2",
},
]
},
]
}]
console.log(quiz[0].questions[0].answers[0].text)
let beginQuiz = true;
function processQuestion(question_id) {
// get question html tag and set question
const question = document.getElementById("question");
question.innerText = quiz[0].questions[question_id].question_name;
console.log("img1 url");
console.log(quiz[0].questions[question_id].answers[0].img_url)
// get and set answer choices and images to questions
const answer1 = document.getElementById('ans1');
answer1.innerText = quiz[0].questions[question_id].answers[0].text;
const image1 = document.getElementById('ans1-img');
image1.src = quiz[0].questions[question_id].answers[0].img_url;
const answer2 = document.getElementById('ans2');
answer2.innerText = quiz[0].questions[question_id].answers[1].text;
const image2 = document.getElementById('ans2-img');
image2.src = quiz[0].questions[question_id].answers[1].img_url;
const answer3 = document.getElementById('ans3');
answer3.innerText = quiz[0].questions[question_id].answers[2].text
const image3 = document.getElementById('ans3-img');
image3.src = quiz[0].questions[question_id].answers[2].img_url;
const answer4 = document.getElementById('ans4');
answer4.innerText = quiz[0].questions[question_id].answers[3].text
const image4 = document.getElementById('ans4-img');
image4.src = quiz[0].questions[question_id].answers[3].img_url;
}
if (beginQuiz) {
processQuestion(0);
}
console.log("length babbby")
console.log(Object.keys(quiz[0].questions[0]).length)
const next = document.getElementById('next');
var question_id = 0;
next.addEventListener("click", () => {
start = false;
if (question_id < Object.keys(quiz[0].questions[0]).length) {
question_id++;
processQuestion(question_id);
console.log(question_id);
}
})
}
<!doctype html>
<html>
<head>
<title>Our Funky HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>
<body>
<div>
<div class="Questions-section" id="question">
Question appears here
</div>
<section class="Answers-section">
<label class="answer" id="ans1">
<!-- answer 1 -->
<img id="ans1-img" alt="">
<input type="radio" name="favorite_dog" value="dalmation"/>
</label>
<label class="answer" id="ans2">
<!-- answer 2 -->
<img id="ans2-img" src="" alt="">
<input type="radio" name="favorite_dog" value="dalmation"/>
</label>
<label class="answer" id="ans3">
<!-- answer 3 -->
<img id="ans3-img" src="" alt="">
<input type="radio" name="favorite_dog" value="dalmation"/>
</label>
<label class="answer" id="ans4">
<!-- answer 4 -->
<img id="ans4-img" src="" alt="">
<input type="radio" name="favorite_dog" value="dalmation"/>
</label>
<!-- <img id="ans1-img" src="" alt=""> -->
</section>
<div class="button-ctrls">
<button type="button" id="next" class="bttn bttn-blue">Next</button>
</div>
</div>
</body>
</html>

The problem was when you were trying to set the label from javascript you replaced existing nested children with the label value. So all the nested children of label like img tag and input where completely removed from DOM. I think you wanted to append the label instead of removing the already present children nodes. You can do it as shown below using insertAdjacentText()
// get and set answer choices and images to questions
const answer1 = document.getElementById('ans1');
answer1.insertAdjacentText('beforeend', quiz[0].questions[question_id].answers[0].text);
const image1 = document.getElementById("ans1-img");
console.log(image1);
image1.src = quiz[0].questions[question_id].answers[0].img_url;

show images on screen by using urls

I have urls of images from flicker and I want to show them on screen but I can't get any images.
Here is my code:
loadimages(e) {
e.preventDefault();
this.setState({spinner:true});
console.log('spinner');
// axios.get(`https://www.pexels.com/`).then(res=>{
// console.log(this.state.spinner);
// this.setState({images:res.data,spinner:false});
// });
axios.get( "https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&nojsoncallback=true" )
.then((response) => {
console.log('hellodata', response.data.items);
this.setState({
images: response.data.items,
spinner:false
});
console.log('images', this.state.images);
})
.catch(function(err){
console.log(err);
})
}
render() {
const mappedStorage = this.state.images.map((item) => <li>{item.media.m}</li>)
return (
<div className="fun2">
{this.state.spinner ?
<div>
<MDSpinner size={50}/>
</div>
: null
}
{/* <ul>{mappedStorage} */}
<ul>
<img src={mappedStorage} />
</ul>
<button onClick={this.loadimages}>
Click Here
</button>
</div>
)
}
This is a sample response from the API:
{
"title": "Recent Uploads tagged kitten",
"link": "https://www.flickr.com/photos/tags/kitten/",
"description": "",
"modified": "2018-11-13T13:31:05Z",
"generator": "https://www.flickr.com",
"items": [
{
"title": "flo_02-10-06 001",
"link": "https://...",
"media": {
"m": "https://....jpg"
},
"date_taken": "2018-11-13T12:09:32-08:00",
"description": "......"
"published": "2018-11-13T11:11:06Z",
"author": "nobody#flickr.com (\"nikita zenon2\")",
"author_id": "125437611#N07",
"tags": "some tags here"
},
{
"title": "flo_02-10-06 002",
"link": "https://...",
"media": {
"m": "https://....jpg"
},
"date_taken": "2018-11-13T12:09:32-08:00",
"description": "......"
"published": "2018-11-13T11:11:06Z",
"author": "nobody#flickr.com (\"nikita zenon2\")",
"author_id": "125437611#N07",
"tags": "some tags here"
},
I get urls but now I don't now how to show images on screen, maybe by using map function. If you know, please let me know. I'm new in ReactJs.
Thanks

You're almost there actually, you just need to nest your img tags inside of the li tags.
<!-- language: lang-js -->
render() {
const mappedStorage = this.state.images.map((item) => <li><img src={item.media.m} /></li>)
return (
<div className="fun2">
{this.state.spinner?
<div>
<MDSpinner size={50}/>
</div>
:null}
<ul>{mappedStorage}<ul>
<button onClick={this.loadimages}>
Click Here
</button>
</div>
);
}

How can i use the function ng-click in my case?

I have a div with pictures who change every 9 seconds, i want to keep it but i want to change the picture when user click on. I think the most easy is to use the ng-click function, but i don't know how
My code :
In the HTLM :
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 session fondbleuSession">
<div>
<div ng-controller="eventCtrl">
<div ng-repeat="data in event" ng-if="data.id == actualSession">
<div class="sessionTxt">
<h1>{{data.title}} </h1>
<p>{{data.description}} </p>
</div>
<!-- ng-click here ? --> <a ng-href="{{data.url}}" class="sessionImg" ng-style="{'background-image':'url({{data.src}})'}" >
</a>
</div>
</slider>
</div>
</div>
</div>
And
In eventCtrl
app.controller('eventCtrl', function($scope, $interval) {
$scope.actualSession = 0;
var sessionLength = 0;
// INFORMATION GENERAL EVENT
// id = reference de l'image pour l'ordre de passage (+1 a chaque nouveau slide ajouté)
// title = titre de l'event
// description = resume rapide de l'event
// src = adresse de l'image
// url = lien de redirection vers article/sharepoint...
$scope.event = [
{
"id": 1,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo1.jpg",
"url": ""
},
{
"id": 2,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo2.jpg",
"url": ""
},
{
"id": 3,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo3.jpg",
"url": ""
},
{
"id": 4,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo4.jpg",
"url": ""
},
{
"id": 5,
"title": "Site Events",
"description": "",
"src": "images/index/event/Photo5.jpg",
"url": ""
}
];
sessionLength = _.size($scope.event);
$interval(function() {
$scope.actualSession = $scope.actualSession + 1;
if ($scope.actualSession == sessionLength) {
$scope.actualSession = 0;
}
}, 9000); //timer switch event (1000 = 1 seconde)
})
And i don't know if it's possible to have this two function : change the picture automatically after x seconds and change the picture when the user click.
Furthermore, i don't know who to go to the first picture when we come on the last picture
Thank you very much and have a nice day

Try wraping a div around the anchor tag and use ng-click there, hopefully it should work.

If you're looking to change the actionSession variable, it should be straightforward:
ng-click="ctrl.someFunc()"
Then in the controller:
someFunc() {
$scope.actualSession = $scope.actualSession === sessionLength - 1 ? 0 : $scope.actualSession++;
}

How to load different part of data from JSON file for each page using AngularJS?

I'm trying to create a shopping website using angularJs. My website has several html pages like women.html, men.html,...
I has 1 JSON file for the whole website. I want each website has different products, I did it but it only works on the main page (the page which showing all the products). When I click on a specific product, it doesn't show anything thing.
For more clearly, here is my code:
JSON file:
{
"Men": [
{
"name": "Adidas",
"price": 20,
"id": "adidas1",
"image": "pic4.png",
"description": "abcđsfadfdfsgsg"
},
{
"name": "Nike",
"price": 37,
"id": "nike1",
"image": "pic2.png",
"description": "abcđsfadfdfsgsg"
},
{
"name": "Converse",
"price": 25,
"id": "converse1",
"image": "pic3.png",
"description": "abcđsfadfdfsgsg"
}
],
"Women": [
{
"name": "Adidas2",
"price": 20,
"id": "adidas2",
"image": "pic6.png",
"description": "abcđsfadfdfsgsg"
},
{
"name": "Nike2",
"price": 37,
"id": "nike2",
"image": "pic7.png",
"description": "abcđsfadfdfsgsg"
},
{
"name": "Converse2",
"price": 25,
"id": "converse2",
"image": "pic5.png",
"description": "abcđsfadfdfsgsg"
}
]
}
Men.html:
<div ng-repeat="item in items.Men" style="float:left;">
<div><a href="#/item/{{item.name}}"><img src="/image/{{item.image}}" />
</a>
</div>
</div>
Women.html:
<div ng-repeat="item in items.Women" style="float:left;">
<div>
<a href="#/item/{{item.name}}"><img src="/image/{{item.image}}" />
</a>
</div>
</div>
App.js:
app.controller('ItemCtrl',
['$scope', '$routeParams', 'cartService',
function ($scope, $routeParams, cartService) {
$scope.item = {};
angular.forEach($scope.items, function (item) {
if (item.name == $routeParams.itemName) {
$scope.item.itemName = item.name;
$scope.item.itemPrice = item.price;
$scope.item.itemId = item.id;
$scope.item.itemImage = item.image;
$scope.item.itemDescription = item.description;
}
});
$scope.addProduct = function (item) {
cartService.addToCart(item, $scope.numberOfProducts);
};
}
]);
Product details page:
<div style="float:left; margin:0px 50px 300px 50px;">
<img src="/image/{{item.itemImage}}" style="margin- bottom:50px;margin-
left:200px;">
<p style="margin-right:0px;margin-top:50px;margin-left:50px;">Description:
{{item.itemDescription}}</p>
</div>
The code is really long so I only show its parts which I think making my code doesn't work.
Hopefully, there would be some help. Thanks in advance!

Check whether 'ItemCtrl' controller is binded to both men.html and women.html, if both the html files are not views.

Make two controllers and use $http method to call each page.Then using scope,reference data that you want and render in each page

Passing the description text to jquery image slider from database

I am using a jquery image slider , I have figured out , how to pass the images from database to my image slider , but i m having problems passing the description text to each image because the image formation is in a script and i dont know how to pass the eval("description") to the script. Below is the code:
<script type="text/javascript">
if (!window.slider) var slider = {};
slider.data = [{ "id": "slide-img-1", "client": "nature beauty", "desc": "With up to 30 used caravans for you to choose from, you will soon be able to hit the open road...<br /> Come along and browse at your leisure or take a look at a selection of our current stock." }, { "id": "slide-img-2", "client": "nature beauty", "desc": "" }, { "id": "slide-img-3", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-4", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-5", "client": "nature beauty", "desc": "add your description here" }, { "id": "slide-img-6", "client": "nature beauty", "desc": "add your description here"}];
so i want to pass something like "desc":'<%eval("description")%>'
<div id="slide-runner">
<asp:Repeater ID="rptJquery" runat="server">
<ItemTemplate>
<a href="">
<img ID='<%#Eval("slideshowID") %>' src='<%#String.Format("/images/slideshow/{0}", Eval("imgURL"))%>' class="slide"/>
</a>
</ItemTemplate>
</asp:Repeater>
</div>

The best way to achieve this scenario, is to provide your data as JSON and when loading your Image slider, provide this data in the initialization.
The plugin should handle this type of data correctly if you provide it correctly.
if you can tell us the name of your plugin, maybe we can provide some samples for you.