如何通过数组与对象内部循环

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

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