Hide/rerender items after a button action

#1

Will try my best to describe my question.

I want to display a list of latest publications in my TW. The data are injected by external script and stored in an application/json tiddler with json array (e.g. $:/bangyou/latest/json $__bangyou_latest_json.json with following example).

[
  {
    "date": "20241201",
    "eid": "2-s2.0-85185527695",
    "title": "Hymenopteran parasitoid complex and fall armyworm: a case study in eastern India",
    "publicationname": "Scientific Reports",
    "colleagues": "[[Alison Laing]]",
    "link": "https://www.scopus.com/record/display.uri?eid=2-s2.0-85185527695&origin=resultslist"
  },
  {
    "date": "20241201",
    "eid": "2-s2.0-85185920924",
    "title": "Quantifying mangrove carbon assimilation rates using UAV imagery",
    "publicationname": "Scientific Reports",
    "colleagues": "[[Matthew McCabe]]",
    "link": "https://www.scopus.com/record/display.uri?eid=2-s2.0-85185920924&origin=resultslist"
  }
]

Now I manage to write wikitext (latest-literature.json) to

  • render it as a table
    image
    image1263×312 37.9 KB
  • a button Ignore to update field eid-ignore in tiddler $:/bangyou/latest/json as a list of eid which can be externally used.

The final feature I would like is

  • to hide the item/row when I click Ignore button.
  • to hide/ignore items if eid of items in the field eid-ignore

Not sure how to implement it with wiki text. Thanks for any advices.

#2

I added an extra list filter to check whether the eid in the field eid-ignore. It is magically working now although not sure the reason for it.

latest-literature.json (2.3 KB)

1 Like
#3

Here’s a more compact version of your latest-literature tiddler:

\define ignoreeid() <$action-listops $tiddler=<<tid>> $field="eid-ignore" $subfilter="[append<eid>]"/>

<$let tid="$:/bangyou/latest/json" data={{{ [<tid>get[text]] }}}>
<table>
  <tr><th></th><th>Date</th><th>Colleague</th><th>Publication</th><th>Title</th></tr>
  <$list filter="[<data>jsonindexes[]]" variable="thisindex">
    <$list filter='[<data>jsonextract<thisindex>,[eid]trim["]] :except[<tid>get[eid-ignore]enlist-input[]]' variable="eid">
      <tr>
        <td>
          <$button class="tc-btn-rounded" style="width:30px;height:30px;" actions=<<ignoreeid>>>
            {{$:/core/images/close-button}}
          </$button>
        </td>
        <td>
          <$text text={{{ [<data>jsonextract<thisindex>,[date]trim["]format:date[0DD/0MM/YYYY]] }}}/>
        </td>
        <td>
          <$list filter='[<data>jsonextract<thisindex>,[colleagues]trim["]enlist-input[]]' variable="thiscol">
            @<$link to=<<thiscol>>/>
          </$list>
        </td>
        <td>
          <a href={{{ [<data>get[text]jsonextract<thisindex>,[link]trim["]] }}} target="_blank">
            <$text text={{{ [<data>jsonextract<thisindex>,[publicationname]trim["]] }}}/>
          </a>
        </td>
        <td>
          <$text text={{{ [<data>jsonextract<thisindex>,[title]trim["]] }}}/>
        </td>
      </tr>
    </$list>
  </$list>
</table>

Notes:

  • Instead of reading and appending the eid that you want to ignore, and only then saving it back to the eid-ignore field of the data tiddler, the ignoreeid() macro uses $action-listops to directly apply the [append<eid>] filter operator to the eid-ignore tiddler field.
  • Instead of repeating the data tiddler title each time, set variable tid="$:/bangyou/latest/json".
  • Instead of repeating the get[text] filter each time, set variable data={{{ [<tid>get[text]] }}} and then just reference <data> in each of the subsequent jsonindexes and jsonextract filter operators.
  • Combine the two $list widgets for getting the eid value, since they both are using the same jsonextract filter operator.
  • Instead of using $list widgets with variable="..." to get the various JSON data values, use filtered transclusion to directly extract and use the desired JSON data values.

enjoy,
-e

1 Like
#4

Hi @EricShulman, thanks for your suggestions. Learn lots of new tips.