WebSocket problem with sending data to WebServer on ESP8266

Question

I am having trouble uploading values to WebServer. In general, everything works correctly until I add more data that I want to send. When I am trying to upload more data, invalid data appears, such as UNDEFINED or it shows only 0, 0, 0. In console everything looks good, so conversion is working well.

{"RGB_Rvalue":101,"RGB_Gvalue":166,"RGB_Bvalue":141,"CMYK_Cvalue":39,"CMYK_Mvalue":0,"CMYK_Yvalue":15,"CMYK_Kvalue":35,"HSV_Hvalue":157,"HSV_Svalue":39,"HSV_Vvalue":65,"HSL_Hvalue":157,"HSL_Svalue":27,"HSL_Lvalue":52,"XYZ_Xvalue":24,"XYZ_Yvalue":32,"XYZ_Zvalue":30}

void conversion_to_webpage()
{
  unsigned long now = millis();
  if ((unsigned long)(now - previousMillis) > interval) 
  { 
    String jsonString = "";
    StaticJsonDocument<200> doc;
    JsonObject object = doc.to<JsonObject>();
    //RGB
    object["RGB_Rvalue"] = color_RGB[0];
    object["RGB_Gvalue"] = color_RGB[1];
    object["RGB_Bvalue"] = color_RGB[2];
    //CMYK
    object["CMYK_Cvalue"] = color_CMYK[0];
    object["CMYK_Mvalue"] = color_CMYK[1];
    object["CMYK_Yvalue"] = color_CMYK[2];
    object["CMYK_Kvalue"] = color_CMYK[3];

    serializeJson(doc, jsonString);
    Serial.println(jsonString);
    webSocket.broadcastTXT(jsonString);
      
    previousMillis = now;
  }
}

this code work well 1, but when I want to add HSL or HSV in the same way it's stop working. It looks like this: 2. Colors are not showing in the box, XYZ shows only 0,0,0. HSL is showing x,0,0 and sometimes it shows UNDEFINED value. Conversion to another standards is okey. Below code that I use for this.

void conversion_to_webpage()
{
  unsigned long now = millis();
  if ((unsigned long)(now - previousMillis) > interval) 
  { 
    String jsonString = "";
    StaticJsonDocument<256> doc;
    JsonObject object = doc.to<JsonObject>();
    //RGB
    object["RGB_Rvalue"] = color_RGB[0];
    object["RGB_Gvalue"] = color_RGB[1];
    object["RGB_Bvalue"] = color_RGB[2];
    //XYZ
    object["XYZ_Xvalue"] = round(color_XYZ[0]);
    object["XYZ_Yvalue"] = round(color_XYZ[1]);
    object["XYZ_Zvalue"] = round(color_XYZ[2]);
    //CMYK
    object["CMYK_Cvalue"] = color_CMYK[0];
    object["CMYK_Mvalue"] = color_CMYK[1];
    object["CMYK_Yvalue"] = color_CMYK[2];
    object["CMYK_Kvalue"] = color_CMYK[3];
    //HSV
    object["HSV_Hvalue"] = round(color_HSV[0]);
    object["HSV_Svalue"] = round(color_HSV[1]);
    object["HSV_Vvalue"] = round(color_HSV[2]);
    //HSL
    object["HSL_Hvalue"] = round(color_HSL[0]);
    object["HSL_Svalue"] = round(color_HSL[1]);
    object["HSL_Lvalue"] = round(color_HSL[2]);
    

    serializeJson(doc, jsonString);
    Serial.println(jsonString);
    webSocket.broadcastTXT(jsonString);
      
    previousMillis = now;
  }
}

I tried to expand memory from StaticJsonDocument<200> doc; to StaticJsonDocument<400> doc;

Answer 1

I changed

object["RGB_Rvalue"] = color_RGB[0];
object["RGB_Gvalue"] = color_RGB[1];
object["RGB_Bvalue"] = color_RGB[2];

to

object["RGB_value"] = String(color_RGB[0]) + ", " + color_RGB[1] + ", " + color_RGB[2];

and it started working. There was too many objects if I wanted to send all the standards?