CODEWITHSUNDEEP
javascriptjqueryobject
Lucky500
Lucky500

Reputation: 507

Trying to return an object from a function

Apologize, but was not able to find an answer for this question. I am finding items on a html and pushing it to an object, but I can't figure out for the life of me, why this function does not return the object? I am able to console without an issue.

function getItem(obj){
  var itemsObj;
  $('.info').on('click', function(){
    itemsObj = {};
    $this = $(this);
    itemsObj.gameImg = $this.parent().parent().find('img').attr('src');
    itemsObj.gameTitle  = $this.parent().parent().find('p').text();
    itemsObj.gameInfo = $this.parent().parent().find('h2').text();
    // console.log(itemsObj);
    return itemsObj;
  });
}
//getItem();
console.log(getItem());
<div class="col-lg-3 game">
              <div class="view view-first">
               <img src="img/deathstranding.jpg"/>
               <div class="mask">
               <h2>Death Stranding</h2>
               <p>Death Stranding is an upcoming action video game developed by Kojima Productions and published by Sony Interactive Entertainment for PlayStation 4. It is the first game by game director Hideo Kojima and his company following the 2015 disbandment of Kojima Productions as a subsidiary of Konami and subsequent reformation as an independent studio.</p>
                   i<a href="#" class="info">♥</a>
               </div>
             </div>

Upvotes: 0

Views: 92

Answers (2)

masterpreenz
masterpreenz

Reputation: 2290

The reason it is not returning anything it is because you returned the data for click event listener function not for getItem() function, also there is no way to return it that way

function getItem(obj){
  var itemsObj;
  $('.info').on('click', function(){
    itemsObj = {};
    $this = $(this);
    itemsObj.gameImg = $this.parent().parent().find('img').attr('src');
    itemsObj.gameTitle  = $this.parent().parent().find('p').text();
    itemsObj.gameInfo = $this.parent().parent().find('h2').text();
    // This sends data to click event listener not getItem()
    return itemsObj;
  });
}

In order to receive the item you wanted you should implement a callback

function getItem(callback){
  var itemsObj;
  $('.info').on('click', function(){
    itemsObj = {};
    $this = $(this);
    itemsObj.gameImg = $this.parent().parent().find('img').attr('src');
    itemsObj.gameTitle  = $this.parent().parent().find('p').text();
    itemsObj.gameInfo = $this.parent().parent().find('h2').text();
    // call the callback function parameter and send itemsObj as argument, callback function then received the argument as you wanted it to be. Then execute stuff from there.
    callback(itemsObj);
  });
}

// send a function instead for getItem to call when all is well
getItem(function (data) {
   // here you will receive the data
   console.log(data);
   // stuff
});

TIP: If you want a way cooler solution where you want to implement a success and fail scenarios check jQuery Deffered JavaScript Promises

hope that helps

Upvotes: 1

Javad
Javad

Reputation: 437

because you are returning from an event handler which is another function itself. also if you want only push it to local storage , why not do it in the event handler ? 

$('.info').on('click', function(){
  itemsObj = {};
  $this = $(this);
  itemsObj.gameImg =  $this.parent().parent().find('img').attr('src');
  itemsObj.gameTitle = $this.parent().parent().find('h2').text();
  itemsObj.gameInfo = $this.parent().parent().find('p').text();
  // getting previous info
  var savedInfo = localStorage.getItem("gamesinfo");
  // since everything is saved as string , we need to use json
  savedInfo = JSON.parse(savedInfo);
  // check if its not null
  savedInfo = savedInfo ? savedInfo : {};
  // use a unique identifier to save objects , do not push the object into an array every time
  savedInfo[itemsObj.gameTitle] = itemsObj;
  // stringify data and save it
  localStorage.setItem("gamesinfo", JSON.stringify(savedInfo));
  
  
  
  // to retrieve all of games info:
  console.log(JSON.parse(localStorage.getItem("gamesinfo")));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 game">
  <div class="view view-first">
   <img src="img/deathstranding.jpg"/>
   <div class="mask">
   <h2>Death Stranding</h2>
   <p>Death Stranding is an upcoming .....</p>
       i<a href="#" class="info">♥</a>
  </div>
</div>

Upvotes: 1

Related Questions