What is the best way to save pictures into an array using JavaScript?

I am seeking advice on whether it is feasible and the process to follow for storing an image in an array. As someone who is new to JavaScript, I would greatly appreciate a detailed explanation of how this can be achieved along with the syntax involved. My attempts have included using locally stored images as well as URLs from the internet. The goal is to showcase these images when specific conditions are met and a button is clicked. Specifically, I am working on developing a movie suggestion website that will exhibit an array of images upon selecting a genre and clicking the button. While I acknowledge that my code is far from complete, any guidance in the right direction would be invaluable.

My attempt at storing images in an array is reflected below, albeit without success

var images = ['github-logo.png', 'linkedin-logo.png', 'gmail.png']
javascriptarraysformsimagesubmit

Answer №1

If you're looking to organize your images, consider using an array setup like the example provided below:

var pictures = {
    "category1":["image1.jpg", "image2.jpg", "image3.jpg"],
    "category2":["image4.jpg", "image5.jpg", "image6.jpg"],
    "category3":["image7.jpg", "image8.jpg", "image9.jpg"]
};

From there, you can easily access images by their respective categories with code similar to the following:

var imageArray = pictures.category1;

Alternatively, you can also use:

var imageArray = pictures["category1"];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop the loop in JSON using jQuery

I am trying to break out of a loop in jQuery's JSON retrieval when a specific condition is met, but I am having trouble accessing a variable set outside of the JSON code block. Is there a way to achieve this? Below are my scripts: <?php $array ...

javascriptphpjqueryjson

Explore how Vue 2.1 allows for the dynamic updating of dropdown options based on selections made in another dropdown

Currently, I have a Vue v.2 form set up with an address section that includes a State dropdown. My goal is to make the State dropdown automatically populate based on the city selected. For example, if a user chooses 'Atlanta' as the city, 'G ...

javascriptjqueryvue.js

Ways to extract output from another file's standard output?

Take this scenario for instance, Consider having the following code snippet in a file labeled main.js: function main(){ console.log(5); } Now, imagine another file where you aim to extract the stdout from main.js. Presently, your code looks like t ...

javascriptnode.jsfilestreamstdio

Use the reduce method to convert a JavaScript object from 2 to 1

Looking to create a function that can transform these objects: const input1 = [ { id: "lkhj68C13h8uWh4RJz7", post: "on XSS attacks", gender: "Littérature", postId: "cxTbP5EZjNCxw7rD60L7", }, { ...

javascriptnode.jsarraysreactjstypescript

How can I display an array with keys from php in AngularJS using ng-repeat?

I have a rootScope variable that will store product categories, each category may or may not have child categories. Here is how I assign the rootScope: $rootScope.categoryList = $http.get('category').then((result) -> result.data) This code s ...

javascriptphparraysangularjs

The consecutive invocation of the fgets function in C is not yielding the expected outcomes

While experimenting with some random code, I encountered a peculiar issue. Here is the code snippet: #include<stdio.h> int main(void) { char name[6],name2[6]; fgets(name,100,stdin); fgets(name2,100,stdin); printf("%s\n",name); printf("%s\n ...

carraysstringfgets

Requesting CORs on Web API version 2.0

After enabling CORs on a Web API, I encountered an issue where GET and POST requests were failing on Chrome. Interestingly, the GET request worked fine on MS Edge, but the POST request threw two error messages in the console: The request could not be proc ...

javascriptc#ajaxcorsasp.net-web-api2

What is the best way to iterate through each element of an array and cut it in half?

Imagine a scenario where an array called inhabitants represents cities and their respective populations. Let's consider the example of 8 cities and their populations shown in the following array: [3, 6, 0, 4, 3, 2, 7, 1] Due to a pandemic zombie dis ...

javaarraysloops

Oops! It seems like there is an issue with reading the property 'filter' of an undefined object. Any ideas on how to resolve this error

Having an issue with a custom filter that is causing an error "ERROR TypeError: Cannot read property 'filter' of undefined". I need help fixing this as it's preventing anything from rendering on the page. Any suggestions on what changes I sh ...

javascriptangulartypescriptundefined

Is it possible to execute a standalone .js file using Node.js and Express?

I am working on a Node.js/Express project and I need to test a specific file containing a single function. Currently, I have been calling this function in the index.js file and running all functions within it by using `npm run dev`. However, I would like t ...

javascriptnode.jsexpress

Real-time JSON Data Retrieval Using Ajax jQuery and Google Sheet API

Seeking a live data search tool that works with JSON spreadsheets Check out this link for more information name = data.feed.entry[i]['gsx$name']['$t']; img = data.feed.entry[i]['gsx$img']['$t']; price ...

javascriptjqueryjsongoogle-sheetsgoogle-sheets-api

Tips for sending HTML information to a .aspx document and storing it

I am looking to create some dynamic controls in ASP.NET, so I have created an HTML file and used JavaScript to repeat these controls. Now my challenge is how to post the data entered into these controls to an .aspx file and save that data into a database ...

javascriptasp.nethtml

What steps can be taken to safeguard the integrity of document.referrer against alterations by third-party scripts

My website is currently using a third-party script called Chaordic loader.js for product recommendations, but I am facing an issue where it overrides the document.referrer with inaccurate information, causing me quite a headache. Query: Is there a way to ...

javascriptreferrer

Retrieving the DateTime information from a JSON string

I need to extract dates from a string that looks like this: var myJson ="[\r\n \"2018-08-14\",\r\n \"2018-08-30\",\r\n \"2018-11-30\"\r\n]" My initial approach was to use JsonConve ...

c#arraysjsondatetime

Illuminated Box with Text Beneath Image Overlay

Is there a way to customize the text displayed under each zoomed-in image even further, using images, etc. instead of just relying on the alt text? An ideal solution would involve displaying the text in a div. You can find the codepen here: // Looking ...

javascriptjqueryhtmllightbox

React's useEffect() encounters error while retrieving data

I'm attempting to showcase data in this format: import React, {useEffect} from 'react' const Slider = ({ getData }) => { useEffect(() => { getData.map(item => console.log("data : ", ite ...

javascriptreactjsreact-hooks

Tips for changing the TextField variant when it receives input focus and keeping the focus using Material-UI

When a user focuses on the input, I'd like to change the variant of the TextField. The code snippet below accomplishes this, but the input loses focus. This means the user has to click again on the input to focus and start typing. import React, { useS ...

javascriptreactjsmaterial-ui

Refining an object by using a parent key as a filter criterion (JavaScript)

Refined JSON Data Check out this unfiltered JSON object that I am working with: info = [ {id: 1, name: "home", parent: 0, active: 1, order: 0}, {id: 2, name: "dashboard", parent: 0, active: 1, order: 1}, {id: 3, name: & ...

javascriptarraysreactjs

Is there a way to execute browser.get just once in a script?

I'm completely new to protractor, and I've been setting up the browser.get(URL) command within my first 'it' statement. Then, in my afterEach statement, I navigate back to the homepage. I'm curious if there is a more efficient pla ...

javascriptangularjsautomationjasmineprotractor

Having trouble with the tooltip feature in Bootstrap?

I've searched high and low, including on this site! I've experimented with all sorts of code, but nothing seems to make the tooltips function in BootStrap. It's beginning to really frustrate me!! Does anyone happen to have the working js co ...

javascripttwitter-bootstraptooltiptwitter-bootstrap-3