jquery/json - create dynamic array for key

Question

I didn't find out, how to create a json message in jquery with dynamic values for a key array element.

I'm trying to build a json message like this:

{
 "line": {
 "name": "Test",
 "images": [
 {
 "order": "1",
 "link": "https://google.com/1.jpg",
 "name": "1.jpg"
 },
 {
 "order": "2",
 "link": "https://google.com/2.jpg",
 "name": "2.jpg"
 }
 ]
 }
}

I fail to attach the pictures to the message.

jsonObbj = {};
line = {};
line ["name"] = $("#name").val();
 
counter = 1;
$("div.carousel_image > img").each(function() {
 image = {};
 image ["order"] = counter;
 image ["name"] = $(this).attr('src');
 line ["images"].push(image); // How can I edit this image to the images array
 counter++;
});
// how can I add the line to the array

Thx for your help!

Answer 1

You need to initialize line.images to an empty array.

jsonObbj = {};
line = {};
line ["name"] = $("#name").val();
line["images"] = []; // add this line
counter = 1;
$("div.carousel_image > img").each(function() {
 image = {};
 image ["order"] = counter;
 image ["name"] = $(this).attr('src');
 line ["images"].push(image); // How can I edit this image to the images array
 counter++;
});

Note, in general, when your object keys are normal strings, you want to use dot notation: line.images

JSFiddle: https://jsfiddle.net/to4xhewu/

Answer 2

You need to initialise line.images as an array before you can start pushing to it. You should also make sure you declare your variables properly with const, let or var or else they will be implicitly global.

Try this for a simple, object literal initialiser alternative

const jsonObbj = {
 line: {
 name: $("#name").val(),
 images: $("div.carousel_image > img").map((i, img) => ({
 order: i + 1,
 name: img.getAttribute("src"),
 link: img.src
 })).get()
 }
}

See https://api.jquery.com/map/