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

Provide a minimal reproducible example and explain what is wrong specifically. — zer00ne
– zer00ne, Commented Apr 17, 2018 at 10:03
Yes, what exactly have you tried yet with your array of objects? And what do you want to achieve? This is not quite clear. — Mario Murrent
– Mario Murrent, Commented Apr 17, 2018 at 10:04

Community · Accepted Answer · 2020-06-20 09:12:55Z

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>

gurvinder372 · Accepted Answer · 2018-04-17 10:04:41Z

0

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

answered Apr 17, 2018 at 10:04

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

How to loop through array with objects inside

2 Answers 2

ES6

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

ES6

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related