practicalli

https://practicalli.github.io/ http://yt.vu/+practicalli (youtube)
Oliver 2021-04-29T12:24:49.079Z

I am looking for some similar example like below (from John's banking app example) but for populating an HTML table. Any suggestions?

;; Abstracting hiccup with functions
  ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

  (defn unordered-list [items]
    [:ul
     (for [i items]
       [:li i])])

  ;; Many lines of code can now be reduced to a single line

  ;; [:div
  ;;  (unordered-list ["collection" "of" "list" "items"])]
Simple example for data:
(def player-data [{:name "Oliver", :score 100} {:name "Revilo", :score 50}])

Oliver 2021-04-29T13:21:06.081Z

Finally figured out something 😅

(html5 (for [row player-data]
         [:tr (map (fn [x] [:td (val x)]) row)]))
;; =&gt; "<!DOCTYPE html>\n&lt;html&gt;&lt;tr&gt;&lt;td&gt;Oliver&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Revilo&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;/tr&gt;&lt;/html&gt;"

practicalli-john 2021-04-29T18:06:03.083200Z

@oliver.heck I think a more typical approach would be to use a let within the for expression. As for is a macro, then you can use the :let shorter form. This code provides the same output

(html5 (for [row player-data
             :let [player (:name row)
                   score (:score row)]]
         [:tr [:td player] [:td score]]))

1😀
practicalli-john 2021-04-29T18:08:51.084400Z

The last part of the for expression uses the local names created by the let to populate the hiccup structure as the code iterates through player-data