Pulling data from an array made in php and passing it to javascript twig

Question

I am trying to get an array produced in my php controller to pass data to javascript in a .twig file.

I am able to access all the values in a for loop in the .twig but when trying to get the value in javascript, I am only able to get the whole array by using:

var markers = {{ products|json_encode|raw }};

This produces:

var markers = [{"id":"1","name":"x","location":"San Diego"},{"id":"2","name":"y","location":"LA"}];

When trying to access specific values using a for loop within the javascript:

for (i = 0; i < markers.length; i++) 
{ 
alert(markers[i][0])
}

Using console.log / alert I get [undefined] for markers[i][0] and [object object] if I loop through markers[i]. The length is correct.

This is my first project using .twig so I don't know if I am just missing something really obvious as I can't seem to find my problem.

Any help would be appreciated!

In twig use a data attribute on an element, use a filter to escape any single quotes and then use JSON.parse in Javascript to get the data. There is a good tutorial post here: cruftlesscraft.com/… — NeilWkz
– NeilWkz, Commented Jul 29, 2019 at 16:04
Still can't seem to pull any data from the array, only getting "", is it not possible to take the values from var markers = {{ products|json_encode|raw }}; ?. From the example given console.log($entryInfoObjects); shows me the array in console 0: {location: "SD", name: "x"} 1: {location: "LA", name: "y"} but the example given var entryInfo = { location: '{{ product.location }}',}; for extracting specific data gives me " "... — Beth
– Beth, Commented Jul 29, 2019 at 17:22

linuscash · Accepted Answer · 2019-07-29 17:39:18Z

1

It appears that your issue lies in the javascript for loop.

Look here:

var markers = [{"id":"1","name":"x","location":"San Diego"},{"id":"2","name":"y","location":"LA"}];

None of the objects within your array have a property named 0. You only have properties called id, name and location.

Change your loop to something like:

for (i = 0; i < markers.length; i++) 
{ 
  alert(markers[i]['name'])
}

You should see it shows you the value of each objects name property.

answered Jul 29, 2019 at 17:39

linuscash

1,1451 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pulling data from an array made in php and passing it to javascript twig

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related