CODEWITHSUNDEEP
javascriptarraysloopsobject
saint
saint

Reputation: 53

How to loop through array with objects inside

Actually its working with simple array 

let box1 =[01, 02, 03];
function hitMiss(box) {
  $("td").on("click", function(){
      let y = $(this).attr("id");

          if (box.find(boxId => boxId == y)) {
              $(this).addClass("yes");
              console.log("full");
              } else {
              $(this).addClass("no");
              console.log("empty");
     }
  });
};

codepen

But i need to use objects in array

let boxes = [
    { locations: [01, 02, 03]},
    { locations: [23, 24, 25]},
    { locations: [41, 42, 43]}
];

Upvotes: 0

Views: 50

Answers (2)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

ES6

You can also use reduce() and the spread operator. you can achieve your required result.

CODE SNIPPET

boxes = boxes.reduce((r, {locations}) => [...r, ...locations], []);

DEMO

let boxes = [{
  locations: [01, 02, 03]
}, {
  locations: [23, 24, 25]
}, {
  locations: [41, 42, 43]
}];

hitMiss(boxes);

function hitMiss(box) {
  box = box.reduce((r, {
    locations
  }) => [...r, ...locations], []);

  $("td").on("click", function() {
    let y = $(this).attr("id");

    if (box.some(boxId => boxId == y)) {
      $(this).addClass("yes");
      console.log("full");
    } else {
      $(this).addClass("no");
      console.log("empty");
    }
  });
};
html {
  background-color: #859cac;
}

table {
  margin-right: auto;
  margin-left: auto;
}

td {
  height: 40px;
  width: 40px;
  background-color: darkcyan;
  border: solid 2px;
  border-color: black;
}

.yes {
  background-color: red;
}

.no {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="00">00</td>
    <td id="01">01</td>
    <td id="02">02</td>
    <td id="03"></td>
    <td id="04"></td>
    <td id="05"></td>
    <td id="06"></td>
  </tr>
  <tr>
    <td id="10"></td>
    <td id="11"></td>
    <td id="12"></td>
    <td id="13"></td>
    <td id="14"></td>
    <td id="15"></td>
    <td id="16"></td>
  </tr>
  <tr>
    <td id="20"></td>
    <td id="21"></td>
    <td id="22"></td>
    <td id="23"></td>
    <td id="24"></td>
    <td id="25"></td>
    <td id="26"></td>
  </tr>
  <tr>
    <td id="30"></td>
    <td id="31"></td>
    <td id="32"></td>
    <td id="33"></td>
    <td id="34"></td>
    <td id="35"></td>
    <td id="36"></td>
  </tr>
  <tr>
    <td id="40"></td>
    <td id="41"></td>
    <td id="42"></td>
    <td id="43"></td>
    <td id="44"></td>
    <td id="45"></td>
    <td id="46"></td>
  </tr>
  <tr>
    <td id="50"></td>
    <td id="51"></td>
    <td id="52"></td>
    <td id="53"></td>
    <td id="54"></td>
    <td id="55"></td>
    <td id="56"></td>
  </tr>
  <tr>
    <td id="60"></td>
    <td id="61"></td>
    <td id="62"></td>
    <td id="63"></td>
    <td id="64"></td>
    <td id="65"></td>
    <td id="66"></td>
  </tr>
</table>

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68443

Concatenate all the locations using reduce as

var allLocs = boxes.reduce( (a,c) => a.concat(c.locations), [])

Change your internal if-condition to

  if (allLocs.find(boxId => boxId == y)) 
  {
        $(this).addClass("yes");
        console.log("full");
  }
  else 
  {
        $(this).addClass("no");
        console.log("empty");
  }

Please find updated pen

Upvotes: 0

Related Questions