Simple-json-datasource Bad String Error

I just installed simple-json plugin and it appears as a potential data source.
Using Postman I was able to check request and response based on examples from https://github.com/grafana/simple-json-datasource.
However, there is an error in the request example as:

400 Bad Request Bad Request Failed to decode JSON object: Expecting property name enclosed in double quotes: line 18 column 30 (char 322)

This seems to be due to missing “” for refId as when it is manually converted to “refId” it works at Postman.

I really appreciate to have some help on this.

Your server is returning non valid JSON. JSON needs properties to be enclosed in strings

Make sure you are using the latest version of Simple Json - 1.3.1.

Does it work with the fake example backend?

If it does, then to find the error you can compare the output from the example to what your backend is returning.

the issue is in the request example not the response that we return.
The request example doesn’t have “” for refId

I am using 1.3.1
My question is if json plugin request is exactly the same as request example or not.
As in the example request the “” is missing for refId and in my test environment it doesnt work.

Here is what I get from Postman test environment compared to Grafana datasource.

1- Postman test:
Request example from website IS EDITED by adding “” to refId
And I get the right response which I check my response in https://jsonlint.com/ and it says it is a valid json.
If “” is not added it throughs:

400 Bad Request

Bad Request

Failed to decode JSON object: Expecting property name enclosed in double quotes: line 18 column 30 (char 322)

2- Grafana:
I add the url by having updated json plugin.
On Grafana I get “Unknown error"
on terminal I get
"GET /query/ HTTP/1.1” 404 -

Thats why I am assuming there is sth wrong with request from json plugin and most probably it is the missing “”.

I just tested this on Grafana 4.3.2 and this is the request sent from the Graph panel in Grafana:

{"panelId":1,"range":{"from":"2017-06-09T13:47:17.337Z","to":"2017-06-16T13:47:17.337Z","raw":{"from":"now-7d","to":"now"}},"rangeRaw":{"from":"now-7d","to":"now"},"interval":"10m","intervalMs":600000,"targets":[{"target":"upper_25","refId":"A","type":"timeserie"}],"format":"json","maxDataPoints":972,"scopedVars":{"__interval":{"text":"10m","value":"10m"},"__interval_ms":{"text":600000,"value":600000}}}

This is valid JSON and it works properly with the fake simple json data source that I linked to above.

Where are you getting your request?

Where is it missing? No on else has had this issue with the data source so its pretty strange. Sounds more like a problem with your http server returning non valid json

Thanks guys.
The Grafana request @daniellee posted works fine.
As explained before the issue is on https://github.com/grafana/simple-json-datasource
the:
Query API

Example timeserie request

is missing “” for refId.
So you might want to update it with correct request example.

Sorry, totally missed that you meant the example. Thought you meant that Grafana was not returning valid JSON. I will update the example straight away. Thanks for clearing up the confusion!

no worries, my bad as I was not clear enough.
I am sure that I return expected json for plugin and tested through postman too.
When data source is added to grafana it gives unknown error.
Any idea why it happens ?

I found error in console as:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access. The response had HTTP status code 404.

This is the classic CORS (cross origin) error. It is a security feature built into the browser which does not allow http requests between different domains and localhost with different ports are considered different domains. So foobar:3000 and foobar:4000 are the same domain and would not return an error but localhost:3000 and localhost:4000 are considered different domains.

You need to add a CORS header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin to allow access.