Dynamically populate a JavaScript array

Question

Dynamically populate a JavaScript array

I have a javascript file that is used for a slider, which retrieves image URLs from an array. How can I dynamically add image URLs from the code behind? I need to fetch picture URLs from a database and insert them into the array using asp.net c#. The jQuery code snippet looks like this:

$(function() {
    $('#ds_showcase').showcase({
        linksOn: 'images',
        css: {},
        animation: { autoCycle: true, type: 'horizontal-slider', interval: 4000, stopOnHover:true, speed: 1500, easefunction: 'easeOutBounce'},
        images: [
                  { url: 'Showcase_ds_images/lift-truck.jpg ', description: 'Title 2', link: '', target: '_self' },
                  { url: 'Showcase_ds_images/lifttruck2.jpg', description: 'Title 3', link: '', target: '_self' },
                  { url: 'Showcase_ds_images/lift-truck3.jpg', description: 'Title 4', link: '', target: '_self' },

        ],
        navigator: { position: 'bottom-right', orientation: 'horizontal', autoHide: false, showNumber: false,
            css: { padding: '10px'}, 
            item: { css: { height: '10px', width: '10px', backgroundColor: '#cccccc', borderColor: '#999999'},
                    cssHover: { backgroundColor: '#3399ff'},
                    cssSelected: { backgroundColor: '#3399ff', borderColor: '#3399ff'}
            }
        }

    });
});

c#javascript asp.net arrays dynamic

Answer 1

Answer №1

If you want to achieve a similar result, you could consider the following approach:

let jsArray = [];
<%for(let item of items){%>
   jsArray.push('<%=item%>');
<%}%>

This piece of code will create JavaScript with predetermined strings obtained from the server. Each client will have JS that looks something like this:

 let jsArray = [];

    jsArray.push('http://example.com/item1.png');
    jsArray.push('http://example.com/item2.png');
    jsArray.push('http://example.com/item3.png');

In your specific scenario, you could use something along these lines:

$(function() {
    let jsArray = [];
    <%for(let item of items){%>
       jsArray.push({url: '<%=item.url%>', description: '<%=item.desc%>', link: '', target:'_self'});
    <%}%>

    $('#showcase').presentation({
        linksOn: 'items',
        css: {},
        animation: { autoCycle: true, type: 'horizontal-slider', interval: 4000, stopOnHover:true, speed: 1500, easefunction: 'easeOutBounce'},
        items: jsArray,
        navigator: { position: 'bottom-right', orientation: 'horizontal', autoHide: false, showNumber: false,
            css: { padding: '10px'}, 
            item: { css: { height: '10px', width: '10px', backgroundColor: '#cccccc', borderColor: '#999999'},
                    cssHover: { backgroundColor: '#3399ff'},
                    cssSelected: { backgroundColor: '#3399ff', borderColor: '#3399ff'}
            }
        }

    });
});

Answer 2

If you want to achieve a similar result, you could consider the following approach:

let jsArray = [];
<%for(let item of items){%>
   jsArray.push('<%=item%>');
<%}%>

This piece of code will create JavaScript with predetermined strings obtained from the server. Each client will have JS that looks something like this:

 let jsArray = [];

    jsArray.push('http://example.com/item1.png');
    jsArray.push('http://example.com/item2.png');
    jsArray.push('http://example.com/item3.png');

In your specific scenario, you could use something along these lines:

$(function() {
    let jsArray = [];
    <%for(let item of items){%>
       jsArray.push({url: '<%=item.url%>', description: '<%=item.desc%>', link: '', target:'_self'});
    <%}%>

    $('#showcase').presentation({
        linksOn: 'items',
        css: {},
        animation: { autoCycle: true, type: 'horizontal-slider', interval: 4000, stopOnHover:true, speed: 1500, easefunction: 'easeOutBounce'},
        items: jsArray,
        navigator: { position: 'bottom-right', orientation: 'horizontal', autoHide: false, showNumber: false,
            css: { padding: '10px'}, 
            item: { css: { height: '10px', width: '10px', backgroundColor: '#cccccc', borderColor: '#999999'},
                    cssHover: { backgroundColor: '#3399ff'},
                    cssSelected: { backgroundColor: '#3399ff', borderColor: '#3399ff'}
            }
        }

    });
});

Dynamically populate a JavaScript array

Answer №1

Similar questions

Guide on integrating a custom language parser and syntax validation into Monaco editor

`Slide align center in the bxslider``

Is there a way to ensure that my mouseenter function does not run when it is currently in the process of running?

why doesn't the promise return the record after it has been updated

Removing solely the selected item, leaving the rest of the elements on the canvas untouched

I consistently encounter a "KeyError" when attempting to retrieve specific values by keys from a dictionary array

What is the solution for displaying all table rows in a gridview when the associated textbox is left empty?

Angular 6 provides a regular expression that specifically targets the removal of any characters that are not numbers and enforces the allowance of

Acquire an HttpRequest similar to that of Fiddler

Creating a Singleton Database in asp.net mvc3 using Code First

Trouble with parsing JSON in NodeJs

The array error is looking for a specific class

Inquiries regarding scopes, node.js, and express

Issue with ASP.NET Core Controller not properly receiving complete JavaScript array object from Ajax call

An ASP.NET MVC project deployed on Azure integrating with clearDB mySQL through SSL authentication

Can the asynchronous function be further optimized?

Instructions for submitting three different forms from three separate pages simultaneously

Embrace the power of perpetual movement in an ember concurrency task without hindrance

Utilize Photoshop's Javascript feature to extract every layer within the currently active document

Ensure confirmation dialog box pops up multiple times when deleting an item using AJAX