Displaying List with brackets in HTML page

Phoenix Forum Questions / Help
1

Hi,
I have a list

[“High Noon”, “Mr. Deeds Goes to Town”, “Sergeant York”, “For Whom the Bell Tolls”]

which I want to display as hyper links with underlying link as follows

["/title/t10001", “/title/t10002”, “/title/t10003”, “/title/t10004”].

Instead it is displaying as follows

[safe: [60, “a”, [[32, “href”, 61, 34, “/titles/tt0044706”, 34]], 62, “High Noon”, 60, 47, “a”, 62], safe: [60, “a”, [[32, “href”, 61, 34, “/titles/tt0027996”, 34]], 62, “Mr. Deeds Goes to Town”, 60, 47, “a”, 62], safe: [60, “a”, [[32, “href”, 61, 34, “/titles/tt0034167”, 34]], 62, “Sergeant York”, 60, 47, “a”, 62], safe: [60, “a”, [[32, “href”, 61, 34, “/titles/tt0035896”, 34]], 62, “For Whom the Bell Tolls”, 60, 47, “a”, 62]]

How can i do it?

2

Display where?

From a first glance it looks like an iolist representing a couple of anchors.

3

Thank you for the quick reply. I want to display on a webpage.

4

Should work, can you share your code?

5

Sure. I am using inspect to display the opening and closing square brackets.

titles="tt0044706,tt0027996,tt0034167,tt0035896"

 titles
    |> String.split(",")
    |> Enum.map(fn(title) ->
        link  Titles.get_title!(title).originaltitle,
        to: "/titles/#{title}"
      end)
    |> inspect
  end
6

As your essentially trying to display a json style data array format and the browser is saying this is data and isn’t parsing it as strings… it thinks its data. I would probably use a map on the array data in js and construct the object then display that in a for each loop. You really need a js class object. The easiest way is via a js libraries designed to bind data to the view, and take your pick, vue, knockout,svelt, as long as you can for loop over the array.

7

Other wise try and break the data into each separate item and ensure the data is of type string

8

Inspect gives you a representation that is usually valid code. Just remove the inspect call and put the result into your template

1 Like
9

Thank you. Let me try both the suggestions.

10

I don’t want to use JS and so looking for ways to do this using Elixir.

11

As your passing down a list … normally you would loop to turn each value as a individual dom element then you can attach links, or add buttons per item or create a block of elements per item in the list.

If you physically want to make it look like an array with square brackets you need to still ensure the browser can display it as a string, so either escape the brackets or replace the brackets for html char codes
Essentially when receiving a data object you always loop it to break it into individual dom items like spans that bind the values and then just add any holding div, a, p, ul tag etc whatever suits to actually create a list in the ui

13

@evomedia247, I figured the easiest way is to get this done using JS and it is working as expected. Thank you for the pointers.

1 Like
14

Glad it helped :slight_smile: