How can I save SortableJS positions to an object?

Question

I am trying to create a questionnaire where users rank images from favourite to least. I am using the SortableJS so the images can be dragged and dropped. I have the position of the images currently in the console.log.

However, I am trying to push it to a dictionary so it could be formatted as: {0 : image2, 1:image1, 2:image3}. This would allow me to see what image is at each index, so when the user clicks submit, 3 more images could be loaded in to be ranked.

Can anyone help how to get it to do this? The dictionary will not work, and the positions are currently in an array.

var ranked = {}
window.sessionStorage.setItem("ranked", JSON.stringify(ranked));

$( function() {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
} );

$(function () {
    $("#items").sortable({
        start: function (event, ui) {
            ui.item.toggleClass("highlight");
        },
        stop: function (event, ui) {
            ui.item.toggleClass("highlight");
            var order = $(this).sortable('toArray');
            var positions = order.join(';');
            var rank = positions;
            console.log(rank);

            var result = $(this).sortable('toArray', {rank: 'value'});
            console.log(result)


        }
    });
    $("#items").disableSelection();
});

<html> 
    <header> 
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
<script type="text/javascript" src="/Users/rankWebsite/js/main.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/Users/rankWebsite/css/mainstyle.css">
    </header>

<body class=body> 

<h1> Rank Images</h1>
<hr>

<div class="images">
<div id="items">
        <img src="/Users/rankWebsite/images/image_1.jpg" id ="image1" style="width:150px;height:150px" >
        <img src="/Users/rankWebsite/images/image_2.jpg" id="image2" style="width:150px;height:150px">
        <img src="/Users/rankWebsite/images/image_3.jpg" id="image3" style="width:150px;height:150px">

</div>
</div>

<div class="button"> 
<button type="submit" onclick="submit()">Submit</button>
</div>


</body>
</html>

I am using firebase to push my results once the users have completed ranking multiple array of images. I need to use the src of the image 1, image 2 etc in the positions, as each user will be randomly allocated different arrays in different orders. — user14578710, Nov 23 '20 at 22:08
Still, it seems like you simply need to take an array, loop through it, and build an object (JavaScript doesn't have dictionaries). Does any of this help? https://stackoverflow.com/questions/4215737/convert-array-to-object — isherwood, Nov 23 '20 at 22:19
that is exactly what i needed! sorry it was such a basic question, programming not my skill! thank you so much — user14578710, Nov 23 '20 at 22:30

The Bomb Squad · Accepted Answer · 2020-11-24T11:18:56.377

Just to make sure, ALL you wish to do is have the images sorted in an array basically right?

//i just gave the example of how to store the images as the data you wanted
function getArrayOfPictures(){
  var items=$('#items')[0].childNodes //change this to wherever the list of images are stored
  return Object.keys(items) //returns an array of each KEY of ITEMS
  .filter(a=>items[a].tagName=="IMG") //returns ONLY the image elements
  .map(a=>{
    var arr=items[a].src.split('/')
    return arr[arr.length-1]
  }) //formats it to have just the name of the img after the last '/'
  //stores data how you would like it(and when the order changes everytime you run this function it would return the ordering of it as well)
}



var itemList=getArrayOfPictures()

console.log(itemList)



var itemPointer=Object.keys(items).filter(a=>items[a].tagName=="IMG") //points to the actual image elements for more advanced things you might want to do

<html> 
    <header> 
        


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    </header>

<body class=body> 

<h1> Rank Images</h1>
<hr>

<div class="images">
<div id="items">
        <img src="https://cdn.akc.org/content/hero/puppy_pictures_header.jpg" id ="image1" style="width:150px;height:150px" >
        <img src="https://www.firstforwomen.com/wp-content/uploads/sites/2/2019/07/puppy-eyes.jpg?w=715" id="image2" style="width:150px;height:150px">
        <img src="https://parade.com/wp-content/uploads/2018/03/golden-puppy-life-national-geographic-ftr.jpg" id="image3" style="width:150px;height:150px">

</div>
</div>

<div class="button"> 
<button type="submit" onclick="submit()">Submit</button>
</div>


</body>
</html>

Yes i intend to store all the images in a sorted array, however, due to each user getting random array of images, I would like to store the (img.src.slice) name instead of the element id (image1) — user14578710, Nov 24 '20 at 10:58
@user14578710 i changed what map does.. try your images with it now — The Bomb Squad, Nov 24 '20 at 11:09
lol forgot to put the arr.length`-1` part.. @user14578710 it's ready now :} — The Bomb Squad, Nov 24 '20 at 11:21
would you know how to do this in javacript? I have now changed languages due to being more comfortable in javascript — user14578710, Nov 30 '20 at 15:29
that was javascript, i just used html to display images to how u it works, but what evaluated what the console is showing is 100% javascript — The Bomb Squad, Nov 30 '20 at 15:38

How can I save SortableJS positions to an object?

1 Answers1