CODEWITHSUNDEEP
reactjsjsondrop-down-menusas
SQALEX101
SQALEX101

Reputation: 229

How to bind JSON output from SAS Webout to a dropdown in reactjs

I have a webpage using SAS web services that were building to call stored processes from. The stored processes take in parameters for the reports they generate as excel. As of now, we're hard coding the list of values into Box1 combobox within the webpage itself. However, what I would like is to have the comboboxes populate dynamically to values of a SAS table say... xNames.sas7bdat on the SAS server. This way we can control the values of the combobox directly from SAS or automate the refresh of values daily..

We're using reactjs and nodejs and the and our page is going to be hosed on a TomCat Server.

The stored process calls a dataset we want ans uses _webout to output a sample JSON text. We see this output on the browser tab when we run it it gives something like below; I chose array format and the array is called coldata.

{"SYSDATE" : "16AUG23" ,"SYSTIME" : "11:10" , "coldata": [ [ "name1" ], [ "name2" ], [ "name3" ] ]}

this looks pretty good. Where i'm struggling is the front end. How do we bind this to a dropdown in our page? the SAS SP url appears to be of redirection type rather than fetch type in the response is a redirection type rather than fetch type.

the code on my page to sttempt to bind the JSON is:

useEffect(()=>{ fetch("https://sas........./SP_SAS_GETJSON_SP").then((response)=>console.log(response));

},[]);

Error fetching data: SYntaxError: "undefined" is not a valid JSON at JSON.parse.

It seems so simple, yet so hard...

any help would be appreciated. Not sure if SAS is wrong in that its not streaming the json file correctly or if my react syntax front end is incorrect..

Thx;

Upvotes: 0

Views: 59

Answers (1)

Richard
Richard

Reputation: 27498

Your SP might need to nest its data reponse in a top-level node named data.

{ data:
  { "SYSDATE" : "16AUG23" 
  , "SYSTIME" : "11:10" 
  , "coldata": [ [ "name1" ], [ "name2" ], [ "name3" ] ]
  }
}

Use your browser devtools (F12) and observe the Network activity. You should see the raw response of your fetch() and therein would be the undefined. While debugging the SP call you should be able to amend the call with debug options

  .../SP_SAS_GETJSON_SP&_debug=<options go here>

From https://support.sas.com/rnd/itech/doc9/dev_guide/stprocess/dbgsrvlt.html Visit the page complete detail

List of Valid Debug Keywords

You can activate the various debugging options by passing the _DEBUG variable to the SAS Stored Process Web Application. Keywords are used to set the debug options. Multiple keywords can be specified separated by commas or spaces. For instance,

_DEBUG=TIME,TRACE

Upvotes: 0

Related Questions