Getting field value

, ,
#1

Hi,
I have a new requirement such that, I need to send the field name to my backend.

\procedure completion()
\procedure errorHandler()

<$list filter="[<status>match[200]]" emptyMessage=<<errorHandler>>>
<$action-setfield $tiddler="postjsonresponsedata" text=<<data>>/>
</$list>
\end completion

\procedure fetchDataAPI()
	<$action-sendmessage
		$message="tm-http-request"
        url="http://localhost:3000/submit"
		method="POST"
        body='{"foo": [[tiddlername]get[fieldname]]}'
		oncompletion=<<completion>>
		onprogress=<<progress>>
	/>
<$let data={{{ [[data]get[text]] }}}>
<<tiddlerize>>
</$let>
\end

<$button actions=<<fetchDataAPI>>>Fetch data </$button>,
I have tried body='{"foo": [[tiddlername]get[fieldname]]}', this way to send the value of the field to the backend, but I’m receiving it as: Data received: { '{"foo": [': { Prozessbegleiter: { _uvar_local_status: '' } } }.

How can I send the value of a tiddler to the backend?
Can anyone please guide me on this?

Thanks,

#2

What does your backend expect the body string to look like. Do not use TW syntax. Tell us what the backend expects in plain text.

Also have a look at: Create Code-Blocks Using Backticks in Discourse Threads – Which shows how to use backticks here in discourse. So you can properly define inline-code and code blocks

1 Like
#3

Backend expects a key value pair,

So I should get :
foo : myvalueofthefield

#4

Assuming myTiddler contains this:

title: myTiddler
myField: value of myField

The test tiddler contains the following code. I did set some variables tiddlerName and fieldName so it will be easier to change, without the need to change the code.

title: test-read-myField

\define tiddlerName() myTiddler
\define fieldName() myField

<$let x={{{ [<tiddlerName>get<fieldName>addprefix[ : ]addprefix<fieldName>] }}}>

<<x>>

</$let>

image
image1546Ă—948 45.9 KB

A second possibility would be this:

<$let y={{{ [<fieldName>] " : " [<tiddlerName>get<fieldName>] +[join[]] }}} >
...

hope that helps
-mario

#5

I tried this, but I am facing the issue with the post again,


\procedure tiddlerName() Mytiddler
\procedure fieldName() myfield

<$let y={{{ [<fieldName>] " : " [<tiddlerName>get<fieldName>] +[join[]] }}} >


	<$action-sendmessage
		$message="tm-http-request"
        url="http://localhost:3000/submit"
		method="POST"
        body=<<y>>
		oncompletion=<<completion>>
		onprogress=<<progress>>
	/>

</$let>

I am getting the proper value in the tiddler, but if I enclose in the body, I’m sending the data from Tiddly like,

"field:value": ""

I need something like :
"field":"value" …meaning that tiddly’s post’s body should send this as a keyvalue pair, but now I’m sending this as ,
"field:value": "", which is really weird.

I am rephrasing it again, if I send it , 
my key should be "field"
and the value should be "value".

But now my key is 'field:value'
and value is "".

Could you please guide me?

#6

Try this

<$let y={{{ [<fieldName>addprefix["]addsuffix["]] " : " [<tiddlerName>get<fieldName>addprefix["]addsuffix["]] +[join[]] }}} >

You can rename the variables as you like. For production you should not use x and y

#7

i tried it, still the issue is same, the issue with json serialization in the tiddly post body.

body=<<y>>

always sends the key, cant integrate value there. Is there any solution for this?

still my payload is "field" : "value:
Can’t integrate value to the body part, it accepts only keys.

#8

What is the backend? Can you link to the documentation of the backend, where it describes the POST command?

#9 
const express = require('express');
const cors = require('cors');

const app = express();
app.use(express.json()); // For parsing application/json
app.use(express.urlencoded({ extended: true })); // For parsing application/x-www-form-urlencoded

// Configure CORS to allow requests from 'https://tiddlywiki.com'
const corsOptions = {
  origin: '*',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors(corsOptions));

// Debugging middleware
app.use((req, res, next) => {
  console.log('Headers:', req.headers);
  console.log('Body:', req.body);
  next();
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log("Server Listening on PORT:", PORT);
});

app.post("/submit", (request, response) => {
    const data = request.body;  // Capture the data sent in the request body
    console.log("Data received:", data);

    // Process the data as needed. Here we're just echoing it back.
    const responseData = {
        message: "Data successfully received.",
        receivedData: data,
        status: "Processed"
    };
    
    const keys = Object.keys(data);
    console.log("Keys of the received data:", keys);

    // Send the response back to the client
    response.json(responseData);
});

The above is my backend.

I referred this link. https://tiddlywiki.com/prerelease/static/WidgetMessage%3A%20tm-http-request%20Examples.html

Could you please look into this? If I send something , the body always assumes that as my key, there is no value always. Please help on this.

#10

You should link to tiddlers from tiddlywiki.com using the “permalink” option. Links to the /static/ site have no javascript code.

https://tiddlywiki.com/#WidgetMessage%3A%20tm-http-request%20Examples

image
image1610Ă—552 60.4 KB

#11

There is no js code here. I referred this document and did the tiddly implementation.
My requirement is , if I send the data in the body, it should send as a key value Json pair. Currently in the tiddly implementation, does it have that support yet ?
I can’t assign values to the key.

#12

There is a bug in the documentation of the POST command. But I would need to investigate that further.

Actually there is a problem in the docs. – The header application/json is missing in the “httpbin.org” POST example. So if we add it to the sendmessage it works – also with your app.

But instead of creating a jsonstring with complicated filters, IMO it is easier to send the whole tiddler using the jsontiddler-macro as in the example below.

See the new parameter header-content-type="application/json"

\procedure http-post-jsontiddler()
	<$action-sendmessage
		$message="tm-http-request"
		url="http://localhost:3000/submit"
		header-content-type="application/json"
		method="POST"
		body=<<jsontiddler myTiddler>>
		oncompletion=<<store-fetched-output>>
	/>
\end

The complex filter looks like this – it works – but it is a mess

<$let y={{{ [<fieldName>addprefix[{"]addsuffix["]] " : " [<tiddlerName>get<fieldName>addprefix["]addsuffix["}]] +[join[]] }}} >

As I wrote a plain text description, what you actually want to achieve would probably be better.

From your initial post, I saw that your JSON data will probably be more complex than “field:values”. So you will definitely have to have a closer look at all the JSON Operators

But as I wrote, the <<jsontiddler macro may be your friend, if you can limit your JSON to a 1 dimentional structure.

Here is the test-tiddler I did use to test the stuff

test-http-request-post.json (1.5 KB)

#13

Great solution, it worked.
I have a small question, what if I want to send many fields,

\define tiddlerName() myTiddler
\define fieldName() myField1, myField2

can we add it like this?

#14

As I wrote. I would write all fields used for 1 POST request in 1 tiddler and send it with the <<jsontiddler macro. So it will send many fields at once. There are some redundant fields like created, modified and so on. But on the server side it’s easy to remove them.