Search code examples
javascriptjsonxmlhttprequestputtrello

How to send object in JavaScript With Trello API? (XMLHttpRequest)


I'm new to javaScript. I was able to send some PUT requests, the problem is none of them had me send an object. now I want to send an object to add/change the cover of a card in Trello (change the color alone for example/ add a cover), but in the Trello API, the cover is of type object. how can i do it with XMLHttpRequest?

my normal PUT request (Works, not for object though):

function updateCheckItem(cardId, checkItemId, state) { // state is boolean
   var url = "https://api.trello.com/1/cards/" + cardId + "/checkItem/" + checkItemId + "?key=...&token=...&state=" + state;

   var xhr = new XMLHttpRequest();
   xhr.open("PUT", URL);

   xhr.setRequestHeader("Accept", "application/json");
   xhr.setRequestHeader("Content-Type", "application/json");

   xhr.onreadystatechange = function () {
       if (this.readyState == 4) {
           //do something not relevant
       }
   };

   xhr.send();
}

now, how should I send an object instead of something like the boolean state in the code above?

I've searched and found something about JSON.stringify but didn't work for me/ didn't know exactly how to use it.

my last unworking attempt:

function Cover(cardId) {
   var url = "https://api.trello.com/1/cards/" + cardId + "?key=...&token=...&cover";

   var xhr = new XMLHttpRequest();
   xhr.open("PUT", URL);

   xhr.setRequestHeader("Accept", "application/json");
   xhr.setRequestHeader("Content-Type", "application/json");

   xhr.onreadystatechange = function () {
       if (this.readyState == 4) {
            //do something not relevant
       }
   };

   xhr.send({ "cover": { "color": "pink" } });
}

here are the options: Options for Trello card cover update

here is what a JSON of a Trello card looks like:

{
   "id": "..."
   .
   .
   .
   "cover": {
      "idAttachment": null,
      "color": null,
      "idUploadedBackground": null,
      "size": "normal",
      "brightness": "dark",
      "idPlugin": null
   },
   .
   .
   .
}

and Thank you.


Solution

  • I solved it, if someone finds this and wants the answer, this is it:

    function uptadeCardCover(cardId,color,size) {
       var url = "https://api.trello.com/1/cards/" + cardId + "?key=xxxxxx&token=xxxxxxxxx";
    
       var xhr = new XMLHttpRequest();
       xhr.open("PUT", URL);
    
       xhr.setRequestHeader("Accept", "application/json");
       xhr.setRequestHeader("Content-Type", "application/json");
    
       xhr.onreadystatechange = function () {
           if (this.readyState == 4 && this.status == 429) {
               // not relevant
           }
       };
    
       xhr.send(JSON.stringify({
           "cover": {
               "color": color,
               "size": size
           }
       }));
    }