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!

dcpomero · Accepted Answer · 2021-09-15 23:45:44Z

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/

answered Sep 15, 2021 at 23:45

dcpomero

9991 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phil · Accepted Answer · 2021-09-16 00:04:58Z

0

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/

answered Sep 16, 2021 at 0:04

Phil

166k25 gold badges265 silver badges269 bronze badges

Collectives™ on Stack Overflow

jquery/json - create dynamic array for key

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related