How to loop through array with objects inside

Question

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]}
];

• zer00ne: Provide a minimal reproducible example and explain what is wrong specifically.
• Mario Murrent: Yes, what exactly have you tried yet with your array of objects? And what do you want to achieve? This is not quite clear.

Answer 1

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>

Answer 2

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