Setting custom field values on a card with the Trello API - api

Question

I am trying to use the new Custom Fields methods of the Trello API to set the value of a custom field on a card.
I've created a custom field of type number. When I make a GET request for the custom field by it's id, it returns this custom field object:
{
"id":"5ab13cdb8acaabe576xxxxx",
"idModel":"54ccee71855b401132xxxxx",
"modelType":"board",
"fieldGroup":"837a643fd25acc835affc227xxxxxxxxxxxxxxxxxxxx",
"name":"Test Number Field",
"pos":16384,
"type":"number"
}
Then when I create a new card in the Trello UI (but do not type in a value in the Test Number Field box) and then GET that card using the customFieldItems=true (as documented here), it returns this card object (irrelevant fields removed):
{
"id": "5ab56e6b62abac194d9xxxxx",
"name": "test1",
"customFieldItems": []
}
Note that since I did not type anything into the Test Number Field box in the UI, the customFieldItems property contains an empty array.
Then if I type in the number 1 in the Test Number Field box in the UI and GET the card again, it returns this (irrelevant fields removed):
{
"id": "5ab56e6b62abac194d9xxxxx",
"name": "test1",
"customFieldItems":
[
{
"id": "5ab570c5b43ed17b2dxxxxx",
"value": {
"number": "1"
},
"idCustomField": "5ab13cdb8acaabe5764xxxxx",
"idModel": "5ab56e6b62abac194d9xxxxx",
"modelType": "card"
}
]
}
I want to be able to set the value of this custom field via API.
When I go to the API documentation for "Setting, updating, and removing the value for a Custom Field on a card," (here) I plug in the following information:
Query Auth
key: (our valid/working Trello API key)
token: (our valid/working Trello API token)
PATH PARAMS
idCard: (ID of the card that the Custom Field value should be set/updated for) 5ab56e6b62abac194d9xxxxx
idCustomField (ID of the Custom Field on the card.): 5ab570c5b43ed17b2dxxxxx
QUERY PARAMS
idCustomField (ID of the Custom Field to which the item belongs.): 5ab13cdb8acaabe576xxxxx
modelType (This should always be card.): card
value (An object containing the key and value to set for the card's Custom Field value. The key used to set the value should match the type of Custom Field defined.): {"number": 2}
When I click Try It, I get the response: 400 Bad Request "Invalid custom field item value."
I've tried the following things:
Switching the two idCustomField values (it's confusing that both the path parameter and query parameter have the same name, implying that they are meant to accept the same value, but then they have different descriptions, and the descriptions are vague/confusing).
Setting both idCustomField values to the same thing (for both of the possible IDs)
Setting the value to 2, {"number": "2"}, {number: 2}, {number: "2"} and more.
No matter what I try, I always get "Invalid custom field item value." This behaves the same way whether the card has a value in the custom field or not.
I'm pretty sure that the idCustomField in the path params is being accepted, because when I change one character, it gives me this error instead: "invalid value for idCustomField".
So I don't know if the "Invalid custom field item value." is referring to the query param idCustomField* or the value.
I also don't know if it makes a difference whether or not the card has an existing value in the custom field, but I want to be able to set the value of this custom field regardless of whether or not it currently has a value in the field.

Answer 1

The live example (using XMLHttpRequest) on the Trello documentation page is wrong. You should use the next example using fetch.
var url = "https://api.trello.com/1/cards/{idCard}/customField/{idCustomField}/item?token={yourToken}&key={yourKey}";
var data = {value: { number: "42" }};
fetch(url, { body: JSON.stringify(data), method: 'PUT', headers: {'content-type': 'application/json'}})
.then((resp) => resp.json())
.then((data) => console.log(JSON.stringify(data, null, 2)))
.catch((err) => console.log(JSON.stringify(err, null, 2)))
This example works. And after trying this, I modified the XMLHttpRequest version and it worked too.
var data = null;
var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
data = {value: { number: "3" }}; //added
var json = JSON.stringify(data); //added
xhr.open("PUT", 'https://api.trello.com/1/cards/{idCard}/customField/{idCustomField}/item?key={yourkey}&token={yourtoken}');
xhr.setRequestHeader('Content-type','application/json'); //added
xhr.send(json); //modified
The point is that you should 1) set the request Content-type header to application/json and 2) pass the value via JSON object body.
I tried to edit the live example on the documentation but I it was not possible. I hope they will fix it soon.