What strategies should be employed to manage data-driven input in this particular scenario?

In the process of creating a small webpage, I have designed 2 navigation panels - one on the left and one on the right.

The leftNav panel contains a list of different flower names.

While the rightNav panel displays images corresponding to each flower.

An example layout is shown below: 

|'''''''''''''''|''''''''''''''''''''''''''''''''''''''|
|               |                      Pics of Flower1 |
|  |'''''''|    |       |'''''|           |'''''|      |
|  |flower1|    |       |  A  |           |  C  |      |
|               |       |.....|           |.....|      |
|  |'''''''|    |                                      |
|  |flower2|    |                                      |
|               |       |'''''|           |'''''|      |
|  |'''''''|    |       |  B  |           |  D  |      |
|  |flower3|    |       |.....|           |.....|      | 
|               |                                      |
|...............|......................................|

Check out the demo here

As I move towards making this page data-driven, I am faced with the challenge of retrieving data from a database for rendering. How can this be done most efficiently?

My current approach involves creating a JSON object structured like this: 

var data = {
    "Lotus" : [ "a1.jpg", "a1.jpg", "a1.jpg", "a1.jpg"  ], 

    "Orchid" : [ "o1.jpg", "o1.jpg", "o1.jpg", "o1.jpg"  ], 

    "Tulip" : [ "t1.jpg", "t1.jpg", "t1.jpg", "t1.jpg"  ], 

    "Rose" : [ "r1.jpg", "r1.jpg", "r1.jpg", "r1.jpg"  ], 
};

Do you think this is an effective method? Any suggestions for a better approach?

javascriptjqueryhtmlcssjson

Answer №1

In the realm of JSON, the preferred approach is to create a more elaborate object, detailing the attributes of each item. Below is an array of objects exemplifying this concept:

var items = [
  {
    "title": "Rose",
    "pictures": [ "r1.jpg", "r2.jpg", "r3.jpg", "r4.jpg" ]
  },
  {
    "title": "Sunflower",
    "pictures": [ "s1.jpg", "s2.jpg", "s3.jpg", "s4.jpg" ]
  }
];

You can iterate through this array and access data such as items[0].title and items[1].pictures[2].

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

React does not allow objects as children, but what if it's actually an array?

My function is encountering an error message that reads: "Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead." I am struggling to understand why this error is occurring. ...

javascriptarraysreactjs

Executing a post request asynchronously and storing the retrieved data into a variable

Currently, I am in the process of learning AngularJS and attempting to upgrade my current method of fetching data from a web service and dynamically assigning it to a variable that is binded using ng-repeat. My main objective is to implement an asynchronou ...

jqueryhtmlangularjsajax

When Socket.emit is called, it outputs <span> elements within a well-structured message

Currently working on a small chat application using Node.js, Express.js, and Socket.IO. However, I'm encountering an issue with formatting. Instead of displaying the message content within <span> tags as intended, it is printing out the actual t ...

javascripthtmlnode.jssocket.io

Styling Multiple Fullscreen Rows with Bootstrap CSS

Does anyone have any suggestions for the CSS code needed to stack five rows on top of each other? Each row should be 100% height and width of the browser. Here is the HTML code I currently have: <div id="wrapper"> <div class="container-fluid"> ...

htmlcsstwitter-bootstrap-3

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...

javascriptjqueryhtmlcss

Deck.gl's StaticMap component from Mapbox fails to resize properly, causing it to overwrite other elements on the screen

I am encountering an issue while trying to integrate a basic deck.gl (mapbox static map) into a react project. Although I can successfully add the map, it ends up taking over the entire page and hides any other content that should be visible above it. Spec ...

htmlreactjsmapboxdeck.gl

Implementing Jquery Datatables in C# Codebase

I'm struggling to populate my jQuery Datatable with a List. Currently, I am writing the list to a file and accessing it in my view-model. Is this the correct approach? This is the snippet of my code: List<string> list = new List<string> ...

javascriptc#ajaxlistdatatables

Are elements in React Native PanResponder capable of being clicked?

While I have movable panresponders, I also require the ability to click on one for an onPress event. Is it achievable? At present, they are <View> elements. If I attempt to switch them to <TouchableOpacity> or a similar element, it results in ...

javascriptiosreactjsreact-nativeanimated

Attempting to implement Ajax for my AddToCart feature while iterating through a form

At the moment, I am facing an issue where only the first item is being added to the cart and the page remains unchanged. On each page, there are a minimum of 3 items, with a new form created for each one. However, the other products do not get added to the ...

c#htmlajaxhtml.beginform

Transforming a redux form onSubmit function into a promise-based structure

One of my goals is to promisify the onSubmit handling in my submitForm for redux form. You can find a similar example here. submitForm = () => { return this.props.submituserForm() .then(() => { console.log('test') }) ...

javascriptreduxpromisereact-reduxredux-form

What are the necessary headers that must accompany a post request?

While testing the server with Postman, everything seems to be working fine as I receive a response: https://i.stack.imgur.com/yMRfj.png However, when attempting to make a POST request from the browser using the same address, it results in an error and th ...

javascriptnode.jsexpressexpress-validator

Issues with hover styles and transitions not being correctly applied to newly appended elements in Firefox

Utilizing an SVG as an interactive floor plan, I have implemented a feature where hovering over different areas on the floor plan (<g> elements) causes them to expand and float above other areas. The element scaling is triggered by CSS, but I use jQu ...

javascriptjqueryhtmlcsssvg

Exploring ways to query a MySQL JSON column for multiple conditions within the same array index

My current setup involves MYSql server version 8.0.17. I need to retrieve records where the uId= 'UR000001' and VIEW = 'Y' from the security column in the table. Viewid Security VW0000000002 {"security": [{"uId": "UR000001 ...

mysqlsqlarraysjson

Button activated on second click

As I am working on a project, I encountered an issue with two buttons and one input field. The input field is supposed to take the value of the clicked button, but currently, the function works only after the second click on the button. I have tried using ...

javascriptjqueryvue.js

Searching for the way to access the values of a nested object's ref in Vue JS?

Within my Vue data object, I store a reference to a structure called Plot. It has properties for length, width, and acreage. interface Plot { length: number, width: number, acreage: number } const model = { plot: ref<Plot[]>([]), }) When fe ...

javascriptvue.jsvue-reactivity

What is the most efficient way to update all elements within an array in a MongoDB document to a specific value?

Imagine a scenario where I possess the subsequent document: { _id: ObjectId("5234cc89687ea597eabee675"), code: "xyz", tags: [ "school", "book", "bag", "headphone", "appliance" ], qty: [ { size: "S", num: 10, color: "blue" }, ...

javascriptnode.jsmongodbmongodb-query

Utilizing Pagination in Python Django to Handle URL Identifiers

I'm encountering a small issue with the following code: Html Code : a href="{% url 'entertainment:novelsView' novel.id %}">buttonclass="pull-right btn btn-primary btn-xs">Link span class="fa fa-link"</span></button</a vi ...

pythonhtmldjango

Utilizing MongoDB's object within the mapper function in MapReduce

I have a question about querying data in MongoDB using the aggregate framework. Originally, my data was structured like this: [ { created_at: "2014-03-31T22:30:48.000Z", id: 450762158586880000, _id: "5339ec9808eb125965f2eae1" } ] Now, ...

javascriptjsonmongodbmapreduce

Encountered a JSON parsing issue when attempting to Deserialize with the JSON Text Reader

I encountered an issue while attempting to read JSON data from a stream: Newtonsoft.Json.JsonSerializationException: 'Unexpected JSON token when reading DataTable. Expected StartArray, got String. Path 'Data.GUID', line 1, position 110.&a ...

c#jsonjson.net

How can I break down an object with hyphenated key names?

Attempting to perform object destructuring on the following: { name: "Bryan", last-name: "Enid" } However, trying to destructure it like this is not successful: const {name, last-name} = req.body Is there an alternative method to destructure this ...

javascriptjson