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!

CodePudding user response：

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/

CodePudding user response：

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/