set twig variable from json array

Question

As twig renders prior to any javascript, I'm running into what feels like a minor problem.

I need to set a variable in twig that I receive from JSON array, but I'm running into some problems, and I feel like this should be simple.

The data is fed to twig through symfony through a json array, and renders different messages depending on one element in the array; this part works without trouble.

I am able to print the output to the twig file; that works fine. The problem is that I'm having a hard time setting this to a twig variable so that I can use it in a few places.

This works fine:

$('.id').html(items[0].id);

and prints out to the twig here correctly:

<div class="id"></div>

I tried to do do something like this:

{% set requestid = '<div class="id"></div>' %}
{{ requestid }}

But as expected this simply rendered the HTML without the value.

I've been attempting to do something like this:

In the twig I have this:

{% set requestid = "request_holder" %}
{{ requestid }}

And in the jquery I have something like this:

var reqid = items[0].id;
reqid.replace("request_holder",reqid);

I also attempted something like this

var request_id = items[0].id;
window.location = request_id.replace("request_holder",request_id)

I feel like I'm missing a small piece.

**Edit for clarity **

The JSON array is being parsed by jquery.

I have the value of items[0].id

Additional edit here - to make it clear that I was confused: cleaning up a little so as not to send future readers down the wrong path

I believe[d] that the variable needs to be assigned in the javascript because the twig, which is php, is generated prior to the javascript.

I have been attempting to generate the twig in the javascript to no avail.

Here's what I have been attempting:

var requestitem = items[0].id;
$('.id').html("{% set requestId = " + requestitem + " %} <br/> {{ requestId }}");

This defines requestId as a string and is only returning + requestitem + onto the page.

When I attempt this (without the quotations)

var requestitem = items[0].id;
$('.id').html("{% set requestId = requestitem %} <br/> {{ requestId }}");

The twig does not recognize requestitem at all

I have attempted quoting out the twig brackets (eg "{" + "%" etc) but this of course only prints them onto the page and does not interpret them.

Answer 1

Twig processes on the server side. It takes variables and renders them as HTML and text. What gets displayed in the browser is just HTML / text / and Javascript. So your set requestid = "request_holder" and {{ requestid}} are just turned to text before they get to the browser.

After that, you have HTML and text on the front end which Javascript can interact with. If you need this id to change on the front end, it needs to be done in Javascript.

What are you using the id to do?

Answer 2

Thanks to the hint from ASOlivieri, I was able to realize what I was doing wrong. I'm putting this here in case anyone comes across this. I was simply looking for a way to create a variable and make it reusable (I didn't go into details as that seemed extraneous).

The data was only available in the JSON array, so any attempt to write it to a twig file would fail, quite simply because it had already been converted to HTML, so I was forced to find another solution,

I was able to keep the variable in a javascript as I had it before

var request_item = items[0].id;

As my original goal was to get the value to update the application through php, I simply needed to use this variable in an AJAX call, and pass it through the path I had wanted to use in twig. Here's a brief summary:

$('#mark-received').click(function()
   {
      var requestURL = "{{ path('my_path') }}";
      jQuery.ajax({
          url: requestURL,
          type: 'GET',
          data: {'id' : request_item},
          success: function success(data, text, xhr){
              $('#mark-received').addClass('hidden');
              $('#received-canceled').removeClass('hidden');
              $('header > .alerts').append( $('<div>Success Message</div>').addClass('alert alert-success'));
          },
          error: function error( xhr, status, err){
             $('header > .alerts').append( $('<div>There is a problem. <div class="close">x</div></div>', err).addClass('alert alert-danger'));
           }
       })
  });