How can I store multiple dropdown values as an object in a single database cell using Laravel?

Here is a dropdown menu with multiple selections:

<select multiple size="4" name="darha[]">
@foreach($doors as $door)
<option value="{ image: '{{ $door->image }}'; code: '{{ $door->code }}'}"{{ $door->code }}</option>
 @endforeach
</select>

Here is the controller in the store function:

$product->darha = implode(', ', $request->darha);

The data inserted into the table looks like this:

{ image: '1527585419301-Door-T-D.jpg'; code: '301-Door-T-D' }, { image: '1527851661402-Door-A-T.jpg'; code: '402-Door-A-T' }

My question is, how can I access the values or properties of each object? Specifically, how can I access the image or code value?

Answer №1

It seems like your json format is incorrect.

There are a few issues that need to be addressed in your json formatting:

1) When creating an array of objects, make sure to enclose them in brackets []

2) Remember to use double quotes for both keys and values in your json, not single quotes!

3) Make sure to separate keys using commas ,, not semi-colons ;


To properly structure your json string, try the following example:

<option value='{"image":"{{ $door->image }}", "code": "{{ $door->code }}"}'>{{ $door->code }}</option>

If you have a json string similar to this:

$var = '[{ "image": "1527585419301-Door-T-D.jpg", "code": "301-Door-T-D" },{ "image": "1527851661402-Door-A-T.jpg", "code": "402-Door-A-T" }]';

You can convert it into a json object using the following code:

$myObjects = json_decode($var);

Then you can access each key as shown below:

$myObjects[0]->image; //'1527585419301-Door-T-D.jpg'

UPDATE

If you're sending a json string from Laravel to JavaScript, it will automatically be converted into a json object.

For instance, if you return the json string below from Laravel to JavaScript:

$var = '{"image": "1527585419301-Door-T-D.jpg", "code": "301-Door-T-D" }';
return $var;

You can access the properties in JavaScript as follows:

var $darha = data.image; // '1527585419301-Door-T-D.jpg'

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

Iterate through a JavaScript array to access objects with varying IDs

Struggling to navigate the JSON data due to ID 29450 and 3000 out of a total of 1500 IDs in the database. Looking to log the information ['Id', 'Description', 'StartDate'] for both IDs. Feeling a bit stuck, hoping someone can ...

creating a Vue app using Node results in an HTML page with no content due to syntax errors

After creating a VueJs page using the CLI, I wanted to share it with others who might not have Vue CLI or Node installed. Just like opening .html files in a browser, I tried to open the index.html file after building it. However, when I opened the file, a ...

Passing error messages from a grandchild component to a grandparent component in React

Is there a way to pass a message from a fetch call in a grand-child component to a grand-parent component? While the concept of lifting state, as explained in the React documentation, is commonly used for scenarios where a user interacts with a button, ot ...

What is the most graceful way to manage devise's 401 error response when using AJAX?

Utilizing devise, one can employ before_filter :authenticate_user! to limit access solely to authenticated users. In the event an unauthenticated user attempts to access a restricted page, devise will automatically redirect them to the sign in page. Henc ...

Ajax long-polling - Timeout triggering unexpectedly

I am having an issue with my Ajax code polling my IIS/ASP server. After calling msgPoll("") once, the function seems to be invoked repeatedly instead of every 30 seconds. Can you help me identify what mistake I might be making? var msgTimOut; f ...

Tips for designing a user interface for a security software product

We have created a cutting-edge security tool that can detect unauthorized network traffic. The user interface for displaying alerts is generated by a Java Servlet page. Currently, the page functions as a sophisticated console log. It features a large text ...

Extract the data from an HTML form and transfer the values into variables within a node.js function

Issue Description: I am facing a challenge in my project where I need to take three numbers as input from the user through an HTML form. Upon submission, I want these values to be passed to a node.js file and stored in variables. Here is the HTML code sni ...

How to set up a MySQL database specifically for a quiz based on different "types"

I am a beginner in the world of HTML, PHP, JavaScript, and MySQL. I have developed a quiz using JavaScript and HTML, but now I believe I need a database to store all the questions and answers. I am currently using PHPMyAdmin to set up the database and tabl ...

Issues with the script manager functionality in asp.net

I need to display a message to the user after submitting a form and include the ID received from the database in the message like this: int reqid = getIDFromDatabase(); string scrp = "<script>alert('Your request has been submitted successfully ...

How to use jQuery to autoplay audio without user interaction

In the process of creating a dashboard that provides sound notifications for new orders to users, I encountered an issue where the audio playback would fail due to lack of user interaction with the document. Despite trying solutions found in various posts, ...

Encountering difficulty loading a Laravel project due to an error

I encountered an issue with the master.blade.php file located in the views folder. The error message reads as follows: *<br/>ParseError <br/>syntax error, unexpected '{', expecting ')' (View: E:\soft\Xampp2\h ...

Issue with express-http-proxy where relative URL paths are not functioning as expected

My server is hosting an app along with a few simple web microservices. I want to access these services over the internet without having to open individual ports for each one. To achieve this, I decided to set up a reverse proxy on the server using express- ...

JsTree drag and drop feature malfunctioning: Icons disappear when dragging items

I am currently utilizing JsTree with the drag and drop plugin enabled in conjunction with an angular directive, https://github.com/ezraroi/ngJsTree. Everything appears to be functioning correctly, however, when I move a node, it does not visually show as ...

ReactJS does not recognize the library mentioned

click here to access the pondjs folder inside node-modulesAfter installing pondjs(https://www.npmjs.com/package/pondjs) using npm install pondjs --save in my react application and confirming its presence in package.json, I encountered an issue in App.js. W ...

Enhance your MongoDB with the power of JQuery and ExpressJS combined with the magic

I've successfully implemented a delete function using type: 'DELETE', and now I'm attempting to create an UPDATE function. However, I'm unsure if I'm approaching this correctly. Here's the code I've written so far: ...

What is the best way to fix multiple dropdown menus opening simultaneously in Vue.js?

I am working on an application that generates todo lists for tasks. These lists can be edited and deleted. I am trying to implement a dropdown menu in each list to provide options for updating or deleting the list individually. However, when I click on the ...

Tips for setting up my bot to pull random messages from a channel and send one when an autoresponse is activated

As per the headline, I attempted to utilize fetchMessages in order to monitor the messages being sent in a specific channel. However, when I experimented with this method, it simply generated never-ending blocks of data in the console. Upon inspection, I ...

An unidentified non-space character appeared following the JSON data on line 1, which was unexpected and at column

I am currently working on a WordPress site locally and my goal is to develop a hybrid app for it using AngularJS. Within WordPress, I have created a plugin to retrieve data. The metadata comes in the form of an array: (...) After converting this complex ...

A guide on transferring data between two arrays of objects using TypeScript

I am working on implementing a get request within a component that retrieves a response: getPaymentIntents(): Observable<Payment>{ const url: string = 'https://store.com//payments'; return this.http.get<Payment>(url); } ...

Unable to reach elements that have been loaded through ajax with jQuery

I am facing an issue where I cannot access content loaded via ajax for modification. Unfortunately, I do not have access to the js file responsible for the initial load. Therefore, I need to create a separate function to alter the content. The required mo ...