Return list type property as comma separated links in dataview table

I worked on this for a while and couldn’t find any help pages that fit before I found a solution, so I’m posting it here to help others.

In a nutshell, I have a number of Obsidian pages that each have several properties, and one of those properties is a list property type. Each value in the list matches a filename elsewhere in my vault.

I have a dataviewjs query that returns a table of these pages with property values. The list property is returned as bulleted list elements without links. I want to return it as a comma-separated list of links.

I’m showing work below, as the interim steps might be valuable to others for learning and for different use-cases. To see the solution I ultimately used, see the Solution section at the bottom.

And if anyone has pointers on refactoring (improving) this, I’d appreciate.

Where I started

Dataview example page properties (assume multiple pages with these properties exist, but the example here works with 1 or many pages):


P1Text: P1Value
P2Number: 8
P3Number: 3
P4List

  • P4ValueA
  • P4ValueB
  • P4ValueC

Standard solution, this returns a table with bullet-item list for P4 - the “normal” solution:

const headers = [“P1Text”, “P2Number”, “P3Number”, “P4List”]

const pages = dv.pages(“#FilterOnThisTag”)
.where(b => !b.file.name.contains(“Template”))
.map(b => [
b.file.link,
b.P1Text,
b.P2Number,
b.P3Number,
b.P4List
])

dv.table(headers, pages, {cls: “my-custom-css-class”});

P4 is returned in a table cell as:
  - P4ValueA
  - P4ValueB
  - P4ValueC

No good.  We want comma separated links.

### Dataview Query that returns list as comma separated list without links (see the line with P4List)
```dataviewjs
const headers = ["P1Text", "P2Number", "P3Number", "P4List"]

const pages = dv.pages("#FilterOnThisTag")
    .where(b => !b.file.name.contains("Template"))
    .map(b => [
      b.file.link,
      b.P1Text,
      b.P2Number,
      b.P3Number,
      b.P4List.join(", ") 
      ])

dv.table(headers, pages, {cls: "my-custom-css-class"});

This returns something like:

P1Text P2Number P3Number P4List
[[Page]] 8 3 P4ValueA, P4ValueB, P4ValueC

Ok - but I want the P4Values as links.

Dataview query that returns a list of links (only showing the P4 line now):

b.P4List.map(listItem => "\[\[" + listItem + "\]\]")

This returns (sorry about the table formatting)

P1Text P2Number P3Number P4List
[[Page]] 8 3 - [[P4ValueA]]
                        - [[P4ValueB]]
                        - [[P4ValueC]] |

Solution

This line will return a comma-separated list of links.
b.P4List.map(listItem => "\[\[" + listItem + "\]\]").join(", ")

Finally!

P1Text P2Number P3Number P4List
[[Page]] 8 3 [[P4ValueA]], [[P4ValueB]], [[P4ValueC]]

Good luck!

1 Like

One additional note - For the List type property values, a [[null]] or Empty must exist and the type must be List on the query result pages, or there will be a join() error.