[badge/dynamic/json] User defined JSON source badge #820

RedSparr0w · 2016-10-28T03:43:34Z

Usage

Allow users to specify their own API/source of json data.

Should also help to minimize the amount of new badges requested as users could easily create a 1 off badge for themselves.

Format

Badge url: /badge/dynamic/json.svg?

`?a=b` params	Usage	Example
`uri` (required)	Address where json is located	`uri=http://path.to.json`
`query` (required)	JSONpath expression	`query=$.version`
`label`	Left hand side text	`label=ProjectX`
`colorB`	Hex color of background for right hand side	`colorB=10ADED`
`prefix`	Prefix for right hand text	`prefix=v`
`suffix`	Suffix for right hand text	`suffix=%20dev`
`logo`	Logo for badge	`logo=twitter`
`style`	Badge style	`style=for-the-badge`

Example badges:

JSON

url:
https://img.shields.io/badge/dynamic/json.svg?uri=https://raw.githubusercontent.com/badges/shields/master/package.json&query=$.version&label=Shields.io&prefix=v&suffix=-master&colorB=10ADED&style=flat-square
badge:

Closes #548.

…_source # Conflicts: # package.json

…_source

RedSparr0w · 2016-12-17T23:49:13Z

@espadrine Any chance i could get this reviewed and hopefully merged? 😄

paulmelnikow · 2017-04-01T21:39:17Z

Hi, thanks for this contribution! This is a cool feature!

We don't currently have automated tests of the vendor code. I opened #927 to discuss how to go about that. A badge like this seems complex enough that it would really benefit from that.

Related: #548

paulmelnikow · 2017-04-28T19:40:27Z

The test framework is merged. Would you be willing to add tests?

https://github.com/badges/shields/tree/master/service-tests

Daniel15 · 2017-04-30T01:32:21Z

to get index.js from {"version": "1.6.10","background": { "scripts": [ "index.js" ] }} the url part would be background=>scripts=>0 which is equivalent to data['background']['scripts'][0]

What about using a standard syntax such as JSONPath (for JSON) and XPath (for XML) for this, rather than inventing a new one? You can use a library like https://yarnpkg.com/en/package/jsonpath to evaluate a JSONPath query. This would also allow more complex expressions, like getting the final item in an array.

RedSparr0w · 2017-05-02T01:11:34Z

@paulmelnikow
Will have a look at the test docs and see what i can do.

@Daniel15
Had a look at the links you posted, not quite sure how easy it would be to implement.
I agree it would be better to use some sort of existing standard syntax for it though.
But compared to the usage & 4 lines of code this uses not sure how in depth/complicated it should need to be.

var items = decodeURI(match[3]).split('=>');

items.forEach(function(item){
  data = data[decodeURI(item)];
});

paulmelnikow · 2017-05-06T15:46:53Z

For JSON, another option I just learned about is jq, which is sort of like awk for json. It could yield more power, such as conditional expressions, and counting the elements in a list.

paulmelnikow · 2017-09-22T18:35:07Z

@RedSparr0w would you have some time to address these comments? This is an awesome feature and it would be great to get it merged.

Also, if anyone would like to adopt this PR, please feel free to do so: grab the branch, add more commits addressing the comments, and open a new PR referencing this one. Will close in one month if no one has done so.

RedSparr0w · 2017-09-22T21:35:14Z

Should be able to create the test for this either today/tomorrow,
Not sure how to go about implementing the JSONPath / XPath / jq options suggested above though.

RedSparr0w · 2017-09-23T00:36:06Z

@paulmelnikow Added tests,
I have had to split it into 2 separate test due to the XML and JSON endpoints.
Is there anything else that needs to be addressed in this PR before it can be merged?

RedSparr0w · 2017-09-23T00:59:02Z

Travis seems to be failing with the following

PR: badges/shields#820
Title: [New Badge] User defined JSON/XML source badge
Services: (2 found) new, badge
Error: Unknown services: new, badge

I assume i just need to change the PR title?
Edit: yup that fixed it

paulmelnikow · 2017-09-24T01:28:29Z

Thanks so much for reviving this! I will review within the next few days, and look into JSONPath/XPath/iq as soon as I can.

paulmelnikow

Looks good!

paulmelnikow · 2017-10-31T02:44:26Z

frontend/fragments/try-footer.html

@@ -448,6 +471,17 @@ <h2 id="like-this"> Like This? </h2>
  document.location = url;
 }

+function generateDynamicImage() {
+  var url = '/badge/dynamic/' + escapeField(dynamicImageMaker.type.value);


I think you want to start with the var url = document.getElementById('imgUrlPrefix').textContent line from makeImage() above. Otherwise it will try to serve from shields.io instead of img.shields.io in production.

To test this you can run make website. The dynamic badge won't work of course, though you should be able to confirm that it's generating URLs that begin with https://img.shields.io/.

Ah did not think about that, i updated it to match the static badge function.

paulmelnikow · 2017-10-31T02:45:19Z

service-tests/json.js

+  .expectJSONTypes(Joi.object().keys({
+    name: Joi.equal('custom badge'),
+    value: Joi.equal('')
+  }));


Since these are both literals, you can simplify this:

.expectJSON({ name: 'custom badge', value: '' })

Nice catch, did not see that.

paulmelnikow · 2017-10-31T02:45:42Z

service-tests/json.js

+t.create('JSON from uri | with prefix & suffix & label')
+  .get('.json?uri=https://github.com/badges/shields/raw/master/package.json&query=$.version&prefix=v&suffix= dev&label=Shields')
+  .expectJSONTypes(Joi.object().keys({
+    name: Joi.equal('Shields'),


You can replace Joi.equal('Shields') with a bare literal 'Shields'.

Good to know!

RedSparr0w · 2017-10-31T22:32:46Z

Not sure why i had to resolve the conflicts twice,
The second "Merge branch 'master' into custom_source" is empty,
But seems to be fine now.

paulmelnikow · 2017-11-01T02:51:13Z

Looks good to me!

RedSparr0w · 2017-11-01T04:03:10Z

Thanks!
Glad to finally have this one closed & merged. 😄

paulmelnikow · 2017-11-01T04:09:02Z

🎃

tooomm · 2018-01-17T22:28:17Z

Are there any plans to expand the feature to the initial idea with json and xml support? @RedSparr0w
I would really like to use that. 😃 👍

By the way, could you please update the starting post of this pr accordingly. You still mention xml there but drop it on the way. That could be confusing if somebody finds this old (and big pr with a lot of comments!).

RedSparr0w · 2018-01-17T23:45:37Z

@tooomm
Good idea! Have updated the main post.
Will hopefully have some time in the next couple of weeks to look at adding xml support.

Notes for future self:
xpath
test xml

reddog · 2018-01-30T16:41:41Z

@RedSparr0w Thanks to everyone for this very useful project.

I have a requirement for the xpath mechanism to parse a web page in order to get the button content. As such, it would be great to know if there were a way that I might be able to help with the project (time, work and the stars permitting, of course!)?

paulmelnikow · 2018-01-31T19:43:56Z

Hey @reddog could you open a new issue to discuss?

reddog · 2018-02-01T10:35:35Z

@paulmelnikow Opened at #1480

tooomm · 2018-05-17T12:20:22Z

There used to be a very helpful link (actually two), to pages that let's you check and build your query. Can you please readd them to the starting post @RedSparr0w ?

I used http://www.jsonquerytool.com/ in the meantime.

RedSparr0w · 2018-05-17T23:41:58Z

@tooomm i believe it may have been: http://jsonpath.com/ , Does this look right?

tooomm · 2018-05-18T00:23:21Z

Yes, I remember that one! Thank you. 👍

RedSparr0w · 2018-05-18T00:32:19Z

No worries, will update the main post to include the link.

mwasilew · 2018-06-27T09:51:55Z

Is there a way to make the colorB also dynamic? Right now I think it has to be passed as hex value in URL. Loading it from the JSON/XML would solve the problem but I'm not sure that is possible. Any hints?

RedSparr0w · 2018-06-27T10:05:05Z

Not currently unfortunately, But #1525 will add something in line with what you are wanting 😄

mwasilew · 2018-06-27T10:57:45Z

@RedSparr0w thanks, I'll wait for it to be merged.

RedSparr0w added 3 commits October 27, 2016 17:02

Add User Defined URL support

7eed1ca

Merge remote-tracking branch 'refs/remotes/badges/master' into custom…

7765ce2

…_source # Conflicts: # package.json

Merge remote-tracking branch 'refs/remotes/badges/master' into custom…

7058fc0

…_source

paulmelnikow added the service-badge Accepted and actionable changes, features, and bugs label Mar 27, 2017

paulmelnikow mentioned this pull request Apr 1, 2017

Extend service to allow values from http request #548

Closed

paulmelnikow mentioned this pull request May 11, 2017

[github] Count all contributors in organization #834

Closed

paulmelnikow added the good first issue New contributors, join in! label Sep 22, 2017

RedSparr0w and others added 2 commits September 23, 2017 10:04

Merge branch 'master' into custom_source

57639f7

Add test

bd02eac

RedSparr0w force-pushed the custom_source branch from 91f8848 to ad44684 Compare September 23, 2017 00:52

RedSparr0w changed the title ~~[New Badge] User defined JSON/XML source badge~~ [JSON XML] User defined JSON/XML source badge Sep 23, 2017

eslint fixes

9659051

RedSparr0w force-pushed the custom_source branch from ad44684 to 9659051 Compare September 23, 2017 01:04

100% coverage

e6813cc

paulmelnikow assigned paulmelnikow and unassigned paulmelnikow Sep 24, 2017

paulmelnikow requested review from paulmelnikow and removed request for paulmelnikow September 24, 2017 01:28

paulmelnikow self-assigned this Sep 24, 2017

paulmelnikow reviewed Oct 31, 2017

View reviewed changes

RedSparr0w added 2 commits November 1, 2017 10:33

update tests

f396d7f

dynamic badge gen use same base url as static badge

ea0619c

RedSparr0w force-pushed the custom_source branch from 812565b to ea0619c Compare October 31, 2017 21:45

RedSparr0w added 2 commits November 1, 2017 10:52

Merge branch 'master' into custom_source

346dc25

Merge branch 'master' into custom_source

9075290

paulmelnikow approved these changes Nov 1, 2017

View reviewed changes

RedSparr0w merged commit ebcfb10 into badges:master Nov 1, 2017

paulmelnikow mentioned this pull request Dec 3, 2017

Request for reversal of the addition of an HTTP server #1314

Closed

tooomm mentioned this pull request Dec 13, 2017

Are you have any example of Dynamic badge? #1370

Closed

reddog mentioned this pull request Feb 1, 2018

Extend service to retrieve values from HTTP request by XPATH (for example) path #1480

Closed

RedSparr0w mentioned this pull request Feb 12, 2018

User defined XML source badge [dynamic-xml dynamic-json] #1494

Merged

3 tasks

tooomm mentioned this pull request Mar 13, 2019

Dynamic badges: add links to pages with query help #3203

Closed

KEINOS mentioned this pull request Jun 14, 2019

JSON output feature (status badges for dockle maybe?) goodwithtech/dockle#24

Closed

[badge/dynamic/json] User defined JSON source badge #820

[badge/dynamic/json] User defined JSON source badge #820

Conversation

RedSparr0w commented Oct 28, 2016 • edited Loading

Usage

Format

Example badges:

JSON

RedSparr0w commented Dec 17, 2016

paulmelnikow commented Apr 1, 2017

paulmelnikow commented Apr 28, 2017

Daniel15 commented Apr 30, 2017 • edited Loading

RedSparr0w commented May 2, 2017

paulmelnikow commented May 6, 2017

paulmelnikow commented Sep 22, 2017

RedSparr0w commented Sep 22, 2017

RedSparr0w commented Sep 23, 2017

RedSparr0w commented Sep 23, 2017 • edited Loading

paulmelnikow commented Sep 24, 2017

paulmelnikow left a comment

Choose a reason for hiding this comment

paulmelnikow Oct 31, 2017

Choose a reason for hiding this comment

paulmelnikow Oct 31, 2017

Choose a reason for hiding this comment

RedSparr0w Oct 31, 2017

Choose a reason for hiding this comment

paulmelnikow Oct 31, 2017

Choose a reason for hiding this comment

RedSparr0w Oct 31, 2017

Choose a reason for hiding this comment

paulmelnikow Oct 31, 2017

Choose a reason for hiding this comment

RedSparr0w Oct 31, 2017

Choose a reason for hiding this comment

RedSparr0w commented Oct 31, 2017 • edited Loading

paulmelnikow commented Nov 1, 2017

RedSparr0w commented Nov 1, 2017

paulmelnikow commented Nov 1, 2017

tooomm commented Jan 17, 2018

RedSparr0w commented Jan 17, 2018 • edited Loading

reddog commented Jan 30, 2018

paulmelnikow commented Jan 31, 2018

reddog commented Feb 1, 2018

tooomm commented May 17, 2018 • edited Loading

RedSparr0w commented May 17, 2018

tooomm commented May 18, 2018

RedSparr0w commented May 18, 2018

mwasilew commented Jun 27, 2018

RedSparr0w commented Jun 27, 2018

mwasilew commented Jun 27, 2018

RedSparr0w commented Oct 28, 2016 •

edited

Loading

Daniel15 commented Apr 30, 2017 •

edited

Loading

RedSparr0w commented Sep 23, 2017 •

edited

Loading

RedSparr0w commented Oct 31, 2017 •

edited

Loading

RedSparr0w commented Jan 17, 2018 •

edited

Loading

tooomm commented May 17, 2018 •

edited

Loading