title: Map two objects and join together
body: <p>I'm trying to join the data result from ajax to the const res. 
  So Ideally the list order would be </p>
  
  <ul>
  <li>Attack    402983</li>
  <li>Defense   1500</li>
  <li>Strength  70</li>
  <li>HitPoints 68   </li>
  </ul>
  
  <p>As you can see below, i'm having trouble appending the two together in a list fashion. An example of whats coming from ajax data is 402983,1500,70,68</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form class="form-inline mt-2 mt-md-0"&gt;
    &lt;input class="form-control mr-sm-2" type="text" name="search" placeholder="Search"/&gt;
    &lt;button id="search-btn" class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search &lt;/button&gt;
  &lt;/form&gt;
  
  &lt;ul id="response"&gt;         
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>// this is the id of the form
    $('#search-btn').on('click', function(e) {
      e.preventDefault();
  
      var url = "?player=";
      var player = $('input[name="search"]').val();
      var urlAddition = url + player
  
      $.ajax({
        url: urlAddition,
        dataType: "html",
        success: function(data) {
          const res = 'Attack, Defense, Strength, HitPoints';
          const list = res.split(",");
          const listdata = data.split(",");
          const secondlists = listdata.map(item =&gt; + item);
          $('ul#response').html(list.map(item =&gt; '&lt;li&gt;' + item + secondlists + '&lt;/li&gt;').join(''));
        }
      });
    });
  </code></pre>