How to output data from 2 VK API methods in a loop through JS?

S

Solti2018-02-07 21:10:32

JavaScript

Solti, 2018-02-07 21:10:32

I can’t correctly display the history of the VK dialog, the messages.getHistory method does not transfer the last name, first name, photo.
How to correctly output in a loop from the dialog history array (messages.getHistory):
1. date
2. message
pass the message sender ID to the get.Users method and output from the array:
3. last name
4. first name
5. photo

code fragment highlighted.
Thanks in advance for any help!

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>

<button id="load">Открыть чат</button>
<div class="wrapper">
<ul id="list"></ul>
<div class="detail" style="display: none;">
<img src="" />
<h3></h3>
<div></div>
<ul class="detail-mess"></ul>

<textarea></textarea>
<button id="send-message">Отправить сообщение</button>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="vk.js"></script>
<script>
  
  $('#load').on('click', loadDialogs);
  $('#send-message').on('click', sendMessage);
  $(document).on('click', '.open-detail', function(event){
    event.preventDefault();
    var uid = +$(event.target).data('uid');
    //sendRequest(
    //'users.get', 
    //{user_ids: uid, fields: 'sex,bdate,country,photo_100,contacts'}, 
    //drawDetailedFrend
    //);
    sendRequest(
    'messages.getHistory', 
    {user_id: uid, count: 200, offset: 0, v: 5.71}, 
    drawDetailedFrend
    );
  });

  function loadDialogs(){
    sendRequest('messages.getDialogs', {count: 200, v: 4.94}, function(data){
      //console.log(data)			
      drawDialogs(data.response);		
    });
    
  }

  function drawDialogs(dialogs){
    //console.log(dialogs);	
    var html = '';
    
    for (var i = 1; i < dialogs.length; i++) {
      //console.log(dialogs[i]);
      var f = dialogs[i];
      
      sendRequest(
    'users.get', 
    {user_ids: f.uid, fields: 'sex,bdate,country,photo_50,online', v: 3}, function(data){
    //console.log(data)
    drawUsers(data.response);	 
    });
    
    function drawUsers(data){
    //console.log(data);
    var users = data[0];
    var online = users.online ? 'Online' : 'Ofline';
    //console.log(data[0]);
    
      html +=
      '<li>'+  
      '<a href="#">'
      +'<img src="'+ users.photo_50 +'" />'
        +'<div>'
          +'<h4>'+ users.first_name + ' ' + users.last_name +'</h4>'
          +'<p>'+online+'</p>'
          +'<button data-uid="'+ users.uid +'" class="open-detail">Открыть</button>'
        +'</div>'
      +'</a>'
      +'</li>';
    
    $('ul').html(html);
    }
    }
  }
  
  
---------------------------------------------------------------------------------------------------------------------------------
  function drawDetailedFrend(history){
    //console.log(history)
    var str = '';
    var send = history.response.items[0];
    for (var i = 1; i < history.response.items.length; i++) {
      
      var user = history.response.items[i];
      //var send = history.response.items[0];
      //console.log(user);
      
      
      if (user.out == '0'){
        
        sendRequest(
    'users.get', 
    {user_ids: user.user_id, fields: 'sex,bdate,country,photo_50,online', v: 3}, function(data){
    //console.log(data)
    userInfo(data.response);	 
    });
    function userInfo(info)	{
      var about = info;
      //console.log(about);
      
      return about;
    }	
    det=userInfo();
    console.log(det);		
        str +=
        '<li>'  			
        +'<img src="'+ user.photo_100 +'" />'
          +'<div>'
            +'<h4>'+ user.user_id+'</h4>'
            +'<p>'+ user.body +'</p>'					
          +'</div>'			
        +'</li>';
      
      $('ul.detail-mess').html(str);
      } else if(user.out == '1') {
        str +=
        '<li>'			
        +'<img src="'+ user.photo_100 +'" />'
          +'<div>'
            +'<h4>'+ user.from_id+'</h4>'
            +'<p>'+ user.body +'</p>'					
          +'</div>'			
        +'</li>';
      }
    
    }
    var $detail = $('.detail');
    $detail.find('button').attr('data-uid', send.user_id);
    $detail.show();
  }
---------------------------------------------------------------------------------------------------------------------------------

  function sendMessage(event){
    var uid = $(event.target).attr('data-uid');
    //console.log('Uid', uid);
    var value = $('textarea').val();
    //console.log('textarea', value);
    if(!value){
      alert('Вы не ввели текст сообщения');
      return;
    }
    sendRequest('messages.send', {user_id: uid, message: value}, function(){
      console.log('сообщение отправлено');			
    });
  }
</script>
</body>
</html>