CODEWITHSUNDEEP
javascripthtmljson
saurav shaw
saurav shaw

Reputation: 5

How to display each value of JSON

<script>

alert('sorry this code snipprt was done by mistake ');

</script>
<!DOCTYPE html>
<html>
<head>
  <title>News</title>
 </head>
<body>
sorry this code snippet was done by mistake 
</body>

</html>

<script>

alert('sorry this code snipprt was done by mistake ');

</script>
<!DOCTYPE html>
<html>
<head>
  <title>News</title>
 </head>
<body>
sorry this code snippet was done by mistake 
</body>

</html>

I am using news API by URL: https://newsapi.org/v2/top-headlines?sources=google-news-in&apiKey=xxxxxxxxxxxxxxxx , i am using query in Javascript to decode JSON.

I am expecting this result as shown in image expecting image

I have tried this codes

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
	
var c = 'https://newsapi.org/v2/top-headlines?country=in&category=business&apiKey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

function myFun() {

    var yt = '';
$.ajax({
	url: c,
	dataType: 'json',
	type:'get',
	cache: false,
	success: function(data) {

		var art = data;

		var source = art.articles;

        var i;

		for (var i = 0; i < source.length; i++) {
		 var x = art.articles[i];

		document.getElementById('result').innerHTML = '<style type=text/css>button{border-radius:16px;background-color:white;border:1px solid black;font-size:15px;fontalign:center;cursor:pointer;position:relative;height:16%;width:flex-start;display:inline-flex;itemalign:center;} img{border-top-left-radius: 16px;border-bottom-left-radius:16px;} h3{font-size:38px;width:flex-start;height:flex-start;} </style> <div><li><a href="'+x.url+'"><button><center><img src="'+x.urlToImage+'" height="247px" width="480px"></center><h3>'+x.title+'</h3></button></a><br><br><br></li></div>';
		}
         
	}
});
	
}

</script>
<!DOCTYPE html>
<html>
<head>
	<title>News</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body onload="myFun();">

<div id="result"></div>
</body>
</html>

but this code display only the last values of JSON and all value is skipped as shown in image result image

Upvotes: 0

Views: 86

Answers (4)

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

You can save the entire innerHTML in a variable and then use it like this:

var requiredHTML = '';    
for (var i = 0; i < source.length; i++) {
            var x = art.articles[i];
            requiredHTML+= '<div><li><a href="'+x.url+'"><button><center><img src="'+x.urlToImage+'" height="247px" width="480px"></center><h3>'+x.title+'</h3></button></a><br><br><br></li></div>';
}
document.getElementById('result').innerHTML = '<style type=text/css>button{border-radius:16px;background-color:white;border:1px solid black;font-size:15px;fontalign:center;cursor:pointer;position:relative;height:16%;width:flex-start;display:inline-flex;itemalign:center;} img{border-top-left-radius: 16px;border-bottom-left-radius:16px;} h3{font-size:38px;width:flex-start;height:flex-start;}</style>' + requiredHTML;

Upvotes: 0

Mor Shemesh
Mor Shemesh

Reputation: 2887

Your for should look something like:

let articlesHtml = '';
for (let i = 0; i < source.length; i++) {
     let article = art.articles[i];
     articlesHtml += '<li><a href="' + article.url + '"><button><center><img src="' + article.urlToImage + '" height="247px" width="480px"></center><h3>' + article.title + '</h3></button></a><br><br><br></li>';
}
document.getElementById('result').innerHTML = '<ul>' + articlesHtml + '</ul>';

Notice, that I'm using 'ul' around 'li' items. While the style, should be added once to the html:

<!DOCTYPE html>
<html>
<head>
    <title>News</title>

    <style type=text/css>button{border-radius:16px;background-color:white;border:1px solid black;font-size:15px;fontalign:center;cursor:pointer;position:relative;height:16%;width:flex-start;display:inline-flex;itemalign:center;} img{border-top-left-radius: 16px;border-bottom-left-radius:16px;} h3{font-size:38px;width:flex-start;height:flex-start;} </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body onload="myFun();">

<div id="result"></div>
</body>
</html>

Upvotes: 1

Jay
Jay

Reputation: 3107

document.getElementById('result').innerHTML += div

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
	
var c = 'https://newsapi.org/v2/top-headlines?country=in&category=business&apiKey=0f6f7e4df5a8411e867b975d70bf0a1f';

function myFun() {

    var yt = '';
$.ajax({
	url: c,
	dataType: 'json',
	type:'get',
	cache: false,
	success: function(data) {

		var art = data;

		var source = art.articles;

        var i;

		for (var i = 0; i < source.length; i++) {
		 var x = art.articles[i];

		document.getElementById('result').innerHTML += '<style type=text/css>button{border-radius:16px;background-color:white;border:1px solid black;font-size:15px;fontalign:center;cursor:pointer;position:relative;height:16%;width:flex-start;display:inline-flex;itemalign:center;} img{border-top-left-radius: 16px;border-bottom-left-radius:16px;} h3{font-size:38px;width:flex-start;height:flex-start;} </style> <div><li><a href="'+x.url+'"><button><center><img src="'+x.urlToImage+'" height="247px" width="480px"></center><h3>'+x.title+'</h3></button></a><br><br><br></li></div>';
		}
         
	}
});
	
}

</script>
<!DOCTYPE html>
<html>
<head>
	<title>News</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body onload="myFun();">

<div id="result"></div>
</body>
</html>

Upvotes: 0

Lykos94
Lykos94

Reputation: 593

You are actually overwriting every time the content of the div with id="result" Try modifying the code as follows:

document.getElementById('result').innerHTML += ...

Note the +=

Upvotes: 3

Related Questions