CODEWITHSUNDEEP
javascriptjqueryjsonajax
DDfrontenderLover
DDfrontenderLover

Reputation: 480

Ajax - how to display json data

I'm trying to display the json data correctly. I've got all the data running but I can't displaying them correctly.

How can I append the names, images and urls so they display like this:

<div>name</div>
<img src="url from jason goes here">
<a href="url">url of page</a>


$(function(){
	$.ajax({
		url: "https://api.github.com/search/repositories?q=stars",
		method: "GET",
		success: function(data) {
			//console.log(data);
			//$(".git-user").html(JSON.stringify(data));

			$.each(data.items, function(i, items) {
				$("#name").append(items.name);
				$("#image").append(items.owner.avatar_url);
				$("#repo").append(items.html_url);
			});
		},
		error: function() {
			console.log(data);
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="git-user">
	<div id="name"></div>
	<div id="image"></div> 
	<a href="#" id="repo"></a>
</div>

Upvotes: 0

Views: 95

Answers (5)

Sagiv b.g
Sagiv b.g

Reputation: 31024

Try this: 

$(function(){
	$.ajax({
		url: "https://api.github.com/search/repositories?q=stars",
		method: "GET",
		success: function(data) {
			//console.log(data);
			//$(".git-user").html(JSON.stringify(data));
            var $wrapper = $('#git-user');
            var $nameElement = $('#name');
            var $imageElement = $('#image');
            var $repoElement = $('#repo');
            
			$.each(data.items, function(i, items) {
        var $clonedName = $nameElement.clone().html(items.name);
        var $clonedImage = $imageElement.clone().attr('src',items.owner.avatar_url);
      	var $clonedRepo = $repoElement.clone().html(items.html_url);
				$wrapper.append($clonedName);
        $wrapper.append($clonedImage );
        $wrapper.append($clonedRepo );
			});
		},
		error: function() {
			console.log(data);
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="git-user">
	<div id="name"></div>
	<img id="image" width="42" height="42" style="display:block;margin:10px"> 
	<a href="#" id="repo"></a>
</div>

Upvotes: 0

Lucky Soni
Lucky Soni

Reputation: 6888

<!-- Lets have a container that will display all the results -->
<div id="results">

</div>

var $container = $('#results'),
    html = '';

$.each(data.items, function(i, item) {
    // build the html
    html += '<div>' +
              '<div class="name">' + item.name + '</div>' + 
              '<div class="image"><img src="' + item.owner.avatar_url + '"></div>' + 
              '<a href="' + item.html_url + '"></a>' + 
           '</div>';
});

// append it to the container
$container.append(html);

Upvotes: 0

Abhinav Galodha
Abhinav Galodha

Reputation: 9928

You can try using the prepend to append the Elements dynamically.

Please note that i have removed the dynamic element in div. So, that elements can be added dynamically. You can format the code below as per your need.

<div id="git-user">

</div


$(function(){
	$.ajax({
		url: "https://api.github.com/search/repositories?q=stars",
		method: "GET",
		success: function(data) {
			//console.log(data);
			//$(".git-user").html(JSON.stringify(data));

			$.each(data.items, function(i, items) {
				
        $('#git-user').prepend('<span>' + items.name+ '</span>');
        $('#git-user').prepend('<img src="' + items.owner.avatar_url + '"/>');
        $('#git-user').prepend('<img src="' + items.html_url + '"/>');
			});
		},
		error: function() {
			console.log(data);
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="git-user">
	
</div>

Upvotes: 0

pablito.aven
pablito.aven

Reputation: 1165

You have to generate one container for every item being loaded. Below is a sample code on how to do it, I hope this leads you in the right direction.

        $.each(data.items, function(i, items) {
            var html_to_append = '<div class="git-user"><div class="name">'+items.name+'</div><div class="image">'+items.owner.avatar_url+'</div><a class="repo">'+items.html_url+'</a></div>';
           $('#items-container').append(html_to_append);
        });

For this solution, you should also have to change the ids to have them as classes, since you will probably have more than just one of each.

This will be the template to display items:

<div class="git-user">
  <div class="name"></div>
  <div class="image"></div> 
  <a href="#" class="repo"></a>
 </div>

This will be how your html looks like(it will be filled with the above):

<div id="items-container"></div>

Upvotes: 4

lagerone
lagerone

Reputation: 1767

Use text instead of append

$(function(){
	$.ajax({
		url: "https://api.github.com/search/repositories?q=stars",
		method: "GET",
		success: function(data) {
			//console.log(data);
			//$(".git-user").html(JSON.stringify(data));

			$.each(data.items, function(i, items) {
				$("#name").text(items.name);
				$("#image").text(items.owner.avatar_url);
				$("#repo").text(items.html_url);
			});
		},
		error: function() {
			console.log(data);
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="git-user">
	<div id="name"></div>
	<div id="image"></div> 
	<a href="#" id="repo"></a>
</div>

Upvotes: -1

Related Questions