title: Mapping an Array of User Data
body: <p>I'm very new to JS and have been stuck on one issue for a while. My project is a card generator that allows users to enter a &quot;dilemma&quot;, draw a random &quot;strategy&quot; card and then save the pairing. I'm having a difficult time displaying the pairing correctly.</p>
  <pre><code>let dataStore = []
  
  let dilemma = &quot;&quot;;
      strategy = &quot;&quot;;
  
  function saveData() {
      newPair = {dilemma: userText.value, strategy: cardText.innerText};
      dataStore.push( newPair )
      displayData();
  }
  
  function doSmtElse( element ) {
   
      console.log( &quot;element is here : &quot; , element , element.dilemma , element.strategy)
   
  
      for (let index = 0; index &lt; dataStore.length; index++) {
          const element = dataStore[index];
          doSmtElse(element )
      }
  }
  
  function displayData() {
   
      console.log( &quot;dataStore is here : &quot; , dataStore)
   
  
      for (let index = 0; index &lt; dataStore.length; index++) {
          const element = dataStore[index];
          doSmtElse(element )
      }
  }
  </code></pre>
  <p>For the <code>displayData</code> function I believe I should be using the map method to iterate over the array but have been unsuccessful thus far. Any tips?</p>
  <p><a href="https://i.stack.imgur.com/4d1vr.png" rel="nofollow noreferrer">Picture of the generator.</a> I've console logged <code>dataStore</code> in the <code>saveData</code> feature and it displays the correct info but I can't get it to show up in the Saved Info box. That's what I want the <code>displayData</code> function to accomplish. Let me know what other info I should provide, I'm very new to this process.</p>
  <p>When the user clicks &quot;Save Strategy&quot; I've added an onclick in HTML that should save the dilemma/strategy pairing and display it in the box below. If you need all of my code, let me know.</p>