Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   ради изучение джаваскипт и аякс пишу простенькое приложение под сайт вконтакте. (https://javascript.ru/forum/dom-window/73791-radi-izuchenie-dzhavaskipt-i-ayaks-pishu-prostenkoe-prilozhenie-pod-sajjt-vkontakte.html)

денис77447327 15.05.2018 13:33

ради изучение джаваскипт и аякс пишу простенькое приложение под сайт вконтакте.
 
которое должно выводить список друзей
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>vk api </title>
</head>

<body>
    

    <button id="load">показать друзей </button> 
	<ul></ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        $('#load').on('click', loadfriends);

        function getUrl(method, params) {
            if (!method) throw new Error('вы не указали метод!');
            params = params || {};
            params['access_token'] = '13cc5db11edac21dddf1faf6e848c5af39dde768674984d368226d0e0397d4713250b0092fd0340396150';
            return 'https://api.vk.com/method/' + method + '?' + $.param(params) + '&v=5.52';
        }

        function sendRequest(method, params, func) {
            $.ajax({
                url: getUrl(method, params),
                method: 'GET',
                dataType: 'JSONP',
                success: func

            });
        }

        function loadfriends() {
            sendRequest('friends.search', {
                count: 6,
                fields: 'photo_100'
            }, function(data) {
             
                drawFriends(data.response);
            });
        }

        function drawFriends(friends) {
            var html = '';
            for (var i = 1; i < friends.length; i++) {
                var f = friends[i];
                html += 
				'<li>'+
                    '<a target = "_blank" href = "vk.com/id' + f.uid + '">'
                    +'<img src="' + f.photo_100 + '"/>' 
					+'<div>'
					    +'<h4>'+ f.first_name + ' ' + f.last_name + '</h4>' 
						+ '<button>написать</button>'
					+'</div>'	
                    + '</a>' 
                    +'</li>';
            }
			$('ul').html(html);
			
        }
    </script>
</body>

</html>


при нажатии на кнопку показать друзей в ответет от сервера возвращает респонс
jQuery2200355515632236987_1526378888772({"response":{"count":6,"items":[{"id":481313066,"first_name":"Карина","last_name":"Михеева","photo_100":"https:\/\/pp.userapi.com\/c847018\/v847018809\/4d95e\/SePLqNK1W8c.jpg"},{"id":481315697,"first_name":"Анастасия","last_name":"Миронова","photo_100":"https:\/\/pp.userapi.com\/c834402\/v834402732\/10c6b9\/VsDTAfYYD0o.jpg"},{"id":481434772,"first_name":"Вера","last_name":"Виртик","deactivated":"banned","photo_100":"https:\/\/vk.com\/images\/deactivated_100.png"},{"id":480884186,"first_name":"Екатерина","last_name":"Карпова","photo_100":"https:\/\/sun1-4.userapi.com\/c840536\/v840536607\/73cf4\/NBEyo6qfl78.jpg"},{"id":480944884,"first_name":"Ольга","last_name":"Романенко","photo_100":"https:\/\/pp.userapi.com\/c834201\/v834201537\/135907\/W_dKS12a910.jpg"},{"id":476864864,"first_name":"Эльвира","last_name":"Мирная","photo_100":"https:\/\/vk.com\/images\/camera_100.png"}]}});

вобщем мне нужно чтобы выводились друзья с аватарками и именами на моем сайте!

P.S. для тестов этого кода сгенерируйте себе новый токен вк апи

Nexus 15.05.2018 13:43

Что не получается то?

денис77447327 15.05.2018 14:19

не выводятся друзья с аватарками

Nexus 15.05.2018 14:42

Попробуйте 41 строку заменить этим:
drawFriends(data.response.items);
И смотрите консоль.

ps. в 47-й строке i должно быть равно 0, не 1.
friends - array, для перебора массива с последующей его отрисовкой можно воспользоваться методом "forEach" или "map".

денис77447327 15.05.2018 15:06

спасибо Nexus помогла замена drawFriends(data.response.items);


Часовой пояс GMT +3, время: 09:54.