Can we convert JSON Array of Objects to lightGalery Array of Objects?

Question

Hello all senior web developers, I am newbie for web development. I have used lightGallery plugin to view images. But my image path stored in array. In array element always dynamic that get from ajax response. This is My array :

     var data = { "result" : [ 
                                { "file_name"  : "a.jpg" },
                                { "file_name"  : "b.png"},
                                  ......................
                             ]
     }

// This is Lightgallery array syntax

     $(this).lightGallery({
       dynamic: true,
       dynamicEl: [{"src": 'your image path'}, 
                   {'src': 'your image path'},
                    ........................
                  ]
     })

// I want like this :

     $(this).lightGallery({
       dynamic: true,
       dynamicEl: [{"src": 'a.jpg'}, 
                   {'src': 'b.jpg'},
                   ................
                  ]
     })

How to do that? Can or not?

thank for valuable help.

Have you tried to make objects from your ajax fetch and push into gallery array? Please add the code what you tried — user8517929
– user8517929, Commented Mar 23, 2018 at 1:38
Personally, if I control the data, I would make the response be the JSON you actually want, otherwise loop. — StackSlave
– StackSlave, Commented Mar 23, 2018 at 1:40
Is the file name corresponding to the full URL of your images? — FisNaN
– FisNaN, Commented Mar 23, 2018 at 1:49

Arman Charan · Accepted Answer · 2018-03-23 01:44:19Z

1

Array.prototype.map() is convenient for creating new arrays based on originals.

See below for a practical example.

// Input.
const input = {
  result: [ 
    { "file_name"  : "a.jpg" },
    { "file_name"  : "b.png"}
  ]
}

// To Dynamic.
const toDynamic = ({result}) => ({
  dynamic: true,
  dynamicEl: result.map(x => ({src: x.file_name}))
})

// Output.
const output = toDynamic(input)

// Proof.
console.log(output)

edited Mar 23, 2018 at 1:44

answered Mar 23, 2018 at 1:39

Arman Charan

5,8292 gold badges26 silver badges36 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2018-03-23 01:39:26Z

0

Your original var data is actually an object - see how it starts with a {.

const data = { "result" : [ 
  { "file_name"  : "a.jpg" },
  { "file_name"  : "b.png"},
]};
const dynamicElArr = data.result.map(({ file_name: src }) => ({ src }));
console.log(dynamicElArr);

Then you can use it for dynamicEl.

answered Mar 23, 2018 at 1:39

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Collectives™ on Stack Overflow

Can we convert JSON Array of Objects to lightGalery Array of Objects?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related