Looping through DOM elements and children to create a JS Array - having trouble understanding the best way to accomplish this

Question

I appreciate any time you spend on this question of mine.

The Project

My mom is an art teacher that spends a lot of time creating paper-cutting guides for her projects. I am working on a tool for her that will allow her to quickly build and share guides through her website. Her site is built with wordpress, so I built the tool using jQuery and jQuery UI. Here is what it looks like in action:

https://i.stack.imgur.com/z3Y5C.gif

The UI is working well enough to move onto saving the data, and that is where I am having trouble.

The Problem

I want to create an array based on the DOM elements created by jquery. The plan is to save the array to WordPress and then use it to rebuild the guide for viewing / editing.

The basic DOM structure goes like this:

 function saveGuide() { numberOfSheets = $(".sheet").length; console.log("number of sheets:", numberOfSheets); sheetCounter = 1; for (i = 0; i < numberOfSheets; i++) { var saveSheets = $(".sheet").map(function() { return { sheetName: $(this).attr("data-id"), width: ($(this).width() + 1) / 80, height: ($(this).height() + 1) / 80, // Map the pieces in the sheet pieces: (saveSheets = $( ".sheet[data-sheetnumber='" + sheetCounter + "'].piece" ).map(function() { return { pieceName: $(this).attr("data-name"), pieceColor: $(this).attr("data-color"), pieceWidth: ($(this).width() + 4) / 80, pieceHeight: ($(this).height() + 4) / 80, pieceXPOS: $(this).position().left / 80, pieceYPOS: $(this).position().top / 80 }; }).get()) }; }).get(); sheetCounter++; } myJSON = JSON.stringify(saveSheets); console.log(myJSON); } saveGuide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="sheet"> <div class="piece"></div> <div class="piece"></div> <div class="line"></div> </div> <div class="sheet"> <div class="piece"></div> <div class="piece"></div> <div class="line"></div> </div>

So each sheet gets entered into the array just fine, but the pieces are always the same and from the last sheet. I'm guessing the variable overwrites itself with each loop...

Here is a link to what the data looks like on save: https://codebeautify.org/jsonviewer/cbff77c4

You can see that both sheets have the same pieces listed.

I am either very close to getting to work or I am way way way off on how I built the function. But I feel like my brain is melting a little right now and could use help or suggestions on what I need to look at.

Much appreciated.

Answer 1

You can use .children([selector]) to get the children of a specific element. If you set the selector, only matching children will be returned.

In your case you should use $(this).children('.piece') (or $sheet.children('.piece') in the example) to get the pieces related to each sheet:

 function saveGuide() { return $(".sheet").map(function() { var $sheet = $(this); return { sheetName: $sheet.attr("data-id"), width: ($sheet.width() + 1) / 80, height: ($sheet.height() + 1) / 80, // Map the pieces in the sheet pieces: $sheet.children('.piece').map(function() { var $piece = $(this); return { pieceName: $piece.attr("data-name"), pieceColor: $piece.attr("data-color"), pieceWidth: ($piece.width() + 4) / 80, pieceHeight: ($piece.height() + 4) / 80, pieceXPOS: $piece.position().left / 80, pieceYPOS: $piece.position().top / 80 }; }).get() }; }).get(); } var saveSheets = saveGuide(); console.log("number of sheets:", saveSheets.length); var myJSON = JSON.stringify(saveSheets); console.log(myJSON);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="sheet"> <div class="piece" data-name="sheet1-1"></div> <div class="piece" data-name="sheet1-2"></div> <div class="line"></div> </div> <div class="sheet"> <div class="piece" data-name="sheet2-1"></div> <div class="piece" data-name="sheet2-2"></div> <div class="line"></div> </div>