Cloudflare Developers•2y ago

JSON to Variable

Get JSON from a URL and set a variable to a specific value in the JSON. Context: I want to be able to get the name of a hex color code from "https://www.thecolorapi.com/id?hex=ffffff".

36 Replies

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

I am very unexperienced and have no clue what that means 😅

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Oh I see, yes I am building this in a cloudflare worker.

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Awesome, thanks!

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Yes, I have seen it but how to a get a specific piece of the json and not the whole thing?

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

{"hex":{"value":"#FFFFFF","clean":"FFFFFF"},"rgb":{"fraction":{"r":1,"g":1,"b":1},"r":255,"g":255,"b":255,"value":"rgb(255, 255, 255)"},"hsl":{"fraction":{"h":0,"s":0,"l":1},"h":0,"s":0,"l":100,"value":"hsl(0, 0%, 100%)"},"hsv":{"fraction":{"h":0,"s":0,"v":1},"value":"hsv(0, 0%, 100%)","h":0,"s":0,"v":100},"name":{"value":"White","closest_named_hex":"#FFFFFF","exact_match_name":true,"distance":0},"cmyk":{"fraction":{"c":0,"m":0,"y":0,"k":0},"value":"cmyk(0, 0, 0, 0)","c":0,"m":0,"y":0,"k":0},"XYZ":{"fraction":{"X":0.95047,"Y":1,"Z":1.08883},"value":"XYZ(95, 100, 108.883)","X":95,"Y":100,"Z":109},"image":{"bare":"https://www.thecolorapi.com/id?format=svg&named=false&hex=FFFFFF","named":"https://www.thecolorapi.com/id?format=svg&hex=FFFFFF"},"contrast":{"value":"#000000"},"_links":{"self":{"href":"/id?hex=FFFFFF"}},"_embedded":{}}

{"hex":{"value":"#FFFFFF","clean":"FFFFFF"},"rgb":{"fraction":{"r":1,"g":1,"b":1},"r":255,"g":255,"b":255,"value":"rgb(255, 255, 255)"},"hsl":{"fraction":{"h":0,"s":0,"l":1},"h":0,"s":0,"l":100,"value":"hsl(0, 0%, 100%)"},"hsv":{"fraction":{"h":0,"s":0,"v":1},"value":"hsv(0, 0%, 100%)","h":0,"s":0,"v":100},"name":{"value":"White","closest_named_hex":"#FFFFFF","exact_match_name":true,"distance":0},"cmyk":{"fraction":{"c":0,"m":0,"y":0,"k":0},"value":"cmyk(0, 0, 0, 0)","c":0,"m":0,"y":0,"k":0},"XYZ":{"fraction":{"X":0.95047,"Y":1,"Z":1.08883},"value":"XYZ(95, 100, 108.883)","X":95,"Y":100,"Z":109},"image":{"bare":"https://www.thecolorapi.com/id?format=svg&named=false&hex=FFFFFF","named":"https://www.thecolorapi.com/id?format=svg&hex=FFFFFF"},"contrast":{"value":"#000000"},"_links":{"self":{"href":"/id?hex=FFFFFF"}},"_embedded":{}}

I want: "value":"White"

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

ohhhh i see, wow that is pretty straight forward ok i will try to use it now, one sec

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Coolio, I will try it out now. Thanks!

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

So here is my code that I have adopted into my base project:

export default {
    async fetch(req) {
      const url = new URL(req.url);
      const type = url.searchParams.get('type');
      var apiresponse="Error: 404"
      
      if (type === 'colorname') {const hex = url.searchParams.get('hex'); const url = "https://www.thecolorapi.com/id?hex=" + hex; const init = {headers: { "content-type": "text/plain" },}; const response = await fetch(url, init); const results = await gatherResponse(response); const apiresponse = JSON.stringify(results.name.value)} 
      
      
      return new Response(apiresponse);
    }
  }
  
async function gatherResponse(response) {
  const { headers } = response;
  const contentType = headers.get("content-type") || "";
  return response.json();
}

export default {
    async fetch(req) {
      const url = new URL(req.url);
      const type = url.searchParams.get('type');
      var apiresponse="Error: 404"
      
      if (type === 'colorname') {const hex = url.searchParams.get('hex'); const url = "https://www.thecolorapi.com/id?hex=" + hex; const init = {headers: { "content-type": "text/plain" },}; const response = await fetch(url, init); const results = await gatherResponse(response); const apiresponse = JSON.stringify(results.name.value)} 
      
      
      return new Response(apiresponse);
    }
  }
  
async function gatherResponse(response) {
  const { headers } = response;
  const contentType = headers.get("content-type") || "";
  return response.json();
}

And it is throwing an 500 Internal Server Error

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Yeah my syntax is crazy, i have other if statements with it to act as pages on the api

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Yes kinda, I want to add other data as well Also I am sure you know but just to make sure the URL would be more like https://worker.url/?type=color&hex=FFFFFF

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Perfect! Thank you for all your help. I will try incorporating this now.

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

I am sorry but I need a little more help xD, I am struggling to incorporate the code into my project so here is my project thus far with my attempt of incorporating them

export default {
    async fetch(req) {
      const url = new URL(req.url);
      var firstnames = ['this', 'was', 'a', 'long', 'list'];
      var lastnames = ['this', 'was', 'a', 'long', 'list'];
      var colors = ['this', 'was', 'a', 'long', 'list'];
      var cities = ['this', 'was', 'a', 'long', 'list'];
  
      const type = url.searchParams.get('type');
      var apiresponse="Error: 404"
      if (type === null) {var apiresponse="An error has occurred."}

      if (type === 'name') {var firstnamerandom=  Math.floor((Math.random() * firstnames.length)); var lastnamerandom=  Math.floor((Math.random() * lastnames.length)); var apiresponse=`{ "firstname": "` + firstnames[firstnamerandom] + `", "lastname": "` + lastnames[lastnamerandom] + `" }`;}
  
      if (type === 'color') {var colorrandom=  Math.floor((Math.random() * colors.length)); var apiresponse=`{ "hex": "` + colors[colorrandom] + `" }` }
  
      if (type === 'city') {var cityrandom=  Math.floor((Math.random() * cities.length)); var apiresponse=`{ "city": "` + cities[cityrandom] + `" }` } 
      
      if (type === 'colorname') {var apiresponse=handleRequest(request)} 
      
      
      return new Response(apiresponse);
    }
  }
  


  async function gatherResponse(response) {
    const { headers } = response;
    const contentType = headers.get("content-type") || "";
    return response.json();
  }
  
  async function handleRequest(request) {
    const { searchParams } = new URL(request.url);
    let type = searchParams.get("type");
    let hex = searchParams.get("hex");
    let url = "https://www.thecolorapi.com/id?hex=" + hex;
    const init = {
      headers: { "content-type": "text/plain" },
    };
    const response = await fetch(url, init);
    const results = await gatherResponse(response);
    const colorName = JSON.stringify(results.name.value);
    return new Response(colorName, init);
  }

export default {
    async fetch(req) {
      const url = new URL(req.url);
      var firstnames = ['this', 'was', 'a', 'long', 'list'];
      var lastnames = ['this', 'was', 'a', 'long', 'list'];
      var colors = ['this', 'was', 'a', 'long', 'list'];
      var cities = ['this', 'was', 'a', 'long', 'list'];
  
      const type = url.searchParams.get('type');
      var apiresponse="Error: 404"
      if (type === null) {var apiresponse="An error has occurred."}

      if (type === 'name') {var firstnamerandom=  Math.floor((Math.random() * firstnames.length)); var lastnamerandom=  Math.floor((Math.random() * lastnames.length)); var apiresponse=`{ "firstname": "` + firstnames[firstnamerandom] + `", "lastname": "` + lastnames[lastnamerandom] + `" }`;}
  
      if (type === 'color') {var colorrandom=  Math.floor((Math.random() * colors.length)); var apiresponse=`{ "hex": "` + colors[colorrandom] + `" }` }
  
      if (type === 'city') {var cityrandom=  Math.floor((Math.random() * cities.length)); var apiresponse=`{ "city": "` + cities[cityrandom] + `" }` } 
      
      if (type === 'colorname') {var apiresponse=handleRequest(request)} 
      
      
      return new Response(apiresponse);
    }
  }
  


  async function gatherResponse(response) {
    const { headers } = response;
    const contentType = headers.get("content-type") || "";
    return response.json();
  }
  
  async function handleRequest(request) {
    const { searchParams } = new URL(request.url);
    let type = searchParams.get("type");
    let hex = searchParams.get("hex");
    let url = "https://www.thecolorapi.com/id?hex=" + hex;
    const init = {
      headers: { "content-type": "text/plain" },
    };
    const response = await fetch(url, init);
    const results = await gatherResponse(response);
    const colorName = JSON.stringify(results.name.value);
    return new Response(colorName, init);
  }

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

oh sorry no I am getting:

GavinOP•2y ago

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

all good, i might be a bit as well thank you again for all your help

Unknown User•2y ago

Message Not Public

GavinOP•2y ago

Works like a charm, thank you! This is helping me get better at JS and JSON.

Unknown User•2y ago

Message Not Public

Gaming

Programming

JSON to Variable