How do you create keys? (JSON)

[Justin_H]

So I had the desire to start playing around with JSON, and I was curious about making a shopping list tiddler, where each item put into the list is a key, and the amount needed would be the value, and to the left of it would be a checkbox to remove it on checking it.

I figured it would be easier in the long run to just use tiddlers and tags but, I don’t want to fill up my TW with a bunch of grocery tiddlers like “Reese’s Puffs (Cereal)” or “Pepper Jack (Cheese)”

Is it possible to do something like what I described above? I know the palette editor will make new keys when you type them as text substitutions into preexisting keys, ie primary color: <<new color>> which makes the key new color: #000 etc.

[TW_Tones]

@Justin_H without goping into too much detail, for now, its my lunch break, the use of data tiddlers is actualy not unlike setting fields in a tiddler, rather than field we use index as the key and it still uses value. Once you wrap your head around that, it is somewhat trivial to make use of them. Rather than the tiddlername which nominates the data tiddler the index nominated the “row” in the data tiddler. Just like we can list all tiddlers with a tag, you can list all rows/keys in a data tiddler see the indexes Operator.

Keep in mind the color pallet is designed for a particular usage in tiddlywikiand I expect your own will be a little simpler, except you want to add the edit components, when the palet comes with an editor.

[etardiff]

The color palettes actually use dictionary tiddlers (type: application/x-tiddler-dictionary) rather than JSON tiddlers (type: application/json) and I’d recommend using a dictionary tiddler for your shopping list too if you want to be able to make easy manual edits just by opening the standard tiddler editor. JSON tiddlers are little less legible at a glance, and much easier to break with stray or missing punctuation.

If you don’t care about manual editing, it doesn’t particularly matter which format you use. I believe data tiddlers will default to application/json if they’re initially created by e.g. a $checkbox or an $edit-text widget, so if you have a preference, make a tiddler with the name you want to use and set the type ahead of time.

If you had a preset list of groceries to check/uncheck, you could do it with index-type $checkbox widgets in a $list, e.g.

<$list filter="[enlist{!!list}]">

<$checkbox tiddler="Grocery List" index={{!!title}} checked="buy" unchecked="">
{{!!title}}
</$checkbox>

</$list>

Here I’m assuming that grocery items will be added/subtracted to the list field of the tiddler where you use this code (not the “Grocery List” tiddler!) but you could store the list wherever you wanted, of course.

If you want to set/track quantities for each item, though, I think you’ll probably want to use $edit-text instead of (or in addition to) checkboxes. You could use the $edit-text to type in whatever quantity you want and then a checkbox to reset the same index to 0 (or blank). Here’s a very quick mock-up:

<$list filter="[enlist{!!list}]">

<$checkbox tiddler="Grocery List" index={{!!title}} unchecked="0" >
{{!!title}}
</$checkbox>
<$edit-text tiddler="Grocery List" index={{!!title}} tag=input type=number />

</$list>

Here, I’m using type=number to give you the buttons for easy incrementing, but if you want to include units like kg or lb, you’ll want to use a “vanilla” $edit-text instead.

And here’s the kind of output you’ll get (assuming you don’t set the tiddler type in advance):

[Justin_H]

@etardiff

Here, I’m using type=number to give you the buttons for easy incrementing, but if you want to include units like kg or lb, you’ll want to use a “vanilla” $edit-text instead.

And here’s the kind of output you’ll get (assuming you don’t set the tiddler type in advance):

This is pretty much exactly what I had in mind! Though I would like to use widgets for textareas over the fields to add or remove keys.

though- I do have a question- how do you remove the keys? I might be misusing the terms keys and values, but if I no longer wanted to buy apples, how would you remove them from not only the list, but also from the dictionary tiddler?

@TW_Tones

I expect your own will be a little simpler

Yep! I don’t want to do anything too complicated or else I’m not really going to figure out much from it. Though @etardiff sort of built most of it already but it gives me something to tinker with.

[TW_Tones]

@Justin_H

but also from the dictionary tiddler?

From memory you set an empty value in the data tiddler to remove the record, but of course in your recipie you have a list field of ingredients you simply remove it from that.

If you look at the Action listops widget and Extended Listops Filters you will see you can take this to a sopisticted level for both list fields and while using the index operator.
*& However search on tiddlywiki.com for index should get you on your way.

[etardiff]

@Justin_H

if I no longer wanted to buy apples, how would you remove them from not only the list, but also from the dictionary tiddler?

It’s a little unintuitive, but if you use $action-setfield without providing a $value, it will just remove the field or index. Here’s a slight modification that will add a button to remove an item:

\procedure remove-item()
<$action-listops $field="list" $subfilter="-[<item>]" />
<$action-setfield $tiddler="Grocery List" $index=<<item>> />
\end

<$list filter="[enlist{!!list}]" variable="item">

<$checkbox tiddler="Grocery List" index=<<item>> unchecked="0" >
<<item>>
</$checkbox>
<$edit-text tiddler="Grocery List" index=<<item>> tag=input type=number size=4 />
<$button actions=<<remove-item>> class="tc-btn-invisible">
{{$:/core/images/close-button}}
</$button>

</$list>

[Justin_H]

Wow, yea that works.

It’s given me a few ideas actually, for ways that I can reuse this for other uses.

I’ll need to play with this more tomorrow.

Before going offline, is there any advantage other than it being more accessible, to not keeping the list in the dictionary tiddler?

If I were to do something like:

\procedure remove-item()
<$action-listops $tiddler="Grocery List" $field="inventory" $subfilter="-[<item>]" />
<$action-setfield $tiddler="Grocery List" $index=<<item>> />
\end

!! Thing's to Buy:
<$list filter="[enlist{Grocery List!!inventory}]" variable="item">

<$checkbox tiddler="Grocery List" index=<<item>> checked="0">
<<item>>
</$checkbox>
<$edit-text tiddler="Grocery List" index=<<item>> tag=input type=number size=2 />
<$button actions=<<remove-item>> class="tc-btn-invisible">
{{$:/core/images/close-button}}
</$button>

</$list>

And make an edit-text widget (I will be working on this tomorrow) to add more values, would this way of doing it cause any sort of issue later in time? I figured keeping all of the relevant data in the same tiddler would be the better choice.

[etardiff]

@Justin_H

is there any advantage other than it being more accessible, to not keeping the list in the dictionary tiddler?

@Justin_H

I figured keeping all of the relevant data in the same tiddler would be the better choice.

Yes, I’d probably do it that way myself! I put the list in the “UI” tiddler purely for ease of testing/displaying examples. You could certainly use an $edit-text to edit a list stored wherever you like.

Personally, I think I’d probably use a textarea rather than an input, and add one item per line—that would be easier to read and scroll through at a glance, and you wouldn’t have to worry about square brackets. You could then use [[Grocery List]get[inventory]splitregexp[\n]] in place of [enlist{Grocery List!!inventory}] in the $list widget that generates the UI.