Split Javascript values in JSON

Question

I need to split an array into an JSON array which should be following pattern.

{{"url":url, "north":True "side":True}, {"url":url, "north":False, "side":True}}

I get the url parameter with this code. As you can see here , this code displays 3 checkboxes where you can select if the picture is north, on the side or if you want to select it.

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
    xmlDoc = xmlHttp.responseXML;
    pictureTemp = [document.getElementById("imgfilename")];

    $('.login-form').append('<button onclick="sendAuswahl()">Send</button><br>');
    for (var i = 0; i < xmlDoc.getElementsByTagName("imgfilename").length; i++) {
      pictureTemp[i] = xmlDoc.getElementsByTagName("imgfilename")[i].childNodes[0].nodeValue;
      $('.login-form').append('<input type="checkbox" name="north" value="North"><input type="checkbox" name="orientation" value="Side"><input type="checkbox" name="url" value='+ pictureTemp[i]+'><img src='+ pictureTemp[i]+' width="50%"></br>');
    };
}

To get all ticked checkboxes, I use this code:

var arrayUrl = $("input[name='url']:checked").map(function(){
      return this.value;
}).get()

var arrayNorth = $("input[name='north']:checked").map(function(){
      return "True";
}).get()

var arrayOrientation = $("input[name='orientation']:checked").map(function(){
      return "True";
}).get()

To convert the selection to a JavaScript object and to get the pattern which I described above, I use this:

var picture = {
      "url" : arrayUrl,
      "North" : arrayNorth,
      "Side" : arrayOrientation
};

But when I alert the value of a selected image I get this:

{"url":http://www.example.com, "north":True "side":True}

And when I select 2 images I get this:

{"url":http://www.example.com, http://www.example2.com, "north":True "side":False}

Instead of this:

{{"url":http://www.example.com, "north":True "side":False}, {"url":http://www.example2.com, "north":False, "side":True}}

So my question is now: How can I adept the values in the pattern which I've described above?

Answer 1

var picture = [];
$.each(arrayUrl, function(index,val) {
    val = {
        "url" : val,
        "North" : arrayNorth[index],
        "Side" : arrayOrientation[index]
    };
    picture.push(val);
});

Answer 2

var picture = [];
$(arrayUrl).each(function(index) {
    picture.push({
        "url": arrayUrl[index],
        "North": arrayNorth[index],
        "Side": arrayOrientation[index]
    });
});