Passing database values to JavaScript under Symfony?

Question

I am creating an autocomplete tool for a specific input field in a form. The autocomplete is fed by a JavaScript array containing the values to suggest, and it works the way I want with fake values. But now, I want to feed the array with actual values from my MySQL database, meaning I have to get my DB's values (an entire column's values, it happens) to this array somehow. Note that I only need to store these values once, like when the page loads.

I've been browsing a lot, but haven't tried anything by lack of understanding of the code and mechanisms. The answer I need is close to what this thread is suggesting, but I couldn't understand how the OP linked his controller to his JavaScript (storing the value of an HTML element with the ID "categories-fetch" in a JS variable seems a bit insufficient to me, if not irrelevant).

I am using HTML-CSS-JS for the front end, Symfony and Doctrine for the back-end and DB communication with MySQL. Any ideas?

SOLUTION EDIT:

With help from @Davis, managed it with a method that gets the data:

From the database to PHP
From PHP to Twig (@Davis's answer)
From Twig to JS

As I said, I haven't tried coding anything yet, pretty much knowing that I wouldn't get to the intended result if I couldn't understand the mechanisms and how to adapt others' solutions to my code. Nonetheless I'm adding a link to the SO post that gave me a solution closest to what I needed, if it can help — MatTheLemur, Oct 31 '20 at 05:45
So... you are building a [`datalist`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can you tell us more about your setup? Are you using webpack, building the js array with twig? — msg, Oct 31 '20 at 06:18
My JS array is built with fake, hard-coded values. Though I am using Twig for this project, I don't believe it would be useful to build the array as I wouldn't be able to fetch an entire table column's values, just info regarding a specific record. Also, I'm using a `textarea` with an added autocomplete feature (got help from [here](https://www.w3schools.com/howto/howto_js_autocomplete.asp)) as opposed to a `datalist`, and am not intending to change mainly because it needs to be a large input field. Not using Webpack at the moment — MatTheLemur, Oct 31 '20 at 06:48

score 0 · Accepted Answer · answered Oct 31 '20 at 06:48

0

I can't add a comment yet!

I hope this article can help you

creating templates

// php
return $this->render('xx/xx/xx.html.twig', [
    'data' => [
        'name' => 'davis',
        'age' => 18,
        'sex' => 'M'
    ]
]);

// twig
<select id="ice-cream-flavors">
    {% for column, value in data %}
        <option value="{{ value }}">
    {% endfor %}
</select>

answered Oct 31 '20 at 06:48

Davis

96
5

Thanks, I've been looking into it since I saw your message, and I'm thinking it could work if I can query for and send a DB table column into that variable used in the render statement, since there's also a way to [send data from Twig to JS](https://symfony.com/doc/current/frontend/encore/server-data.html). Working on it, it would be nice if it fit that nicely – MatTheLemur Oct 31 '20 at 08:05
Is it possible to get data through Ajax calling API interface? – Davis Nov 01 '20 at 07:42

Passing database values to JavaScript under Symfony?

1 Answers1