Skip to content

Instantly share code, notes, and snippets.

@brettneese

brettneese/example.html

Last active May 20, 2017 22:57
Show Gist options
  • Save brettneese/f2129e849fefd339b2d525fa6d47b544 to your computer and use it in GitHub Desktop.
Save brettneese/f2129e849fefd339b2d525fa6d47b544 to your computer and use it in GitHub Desktop.
Download ZIP
WebComponents Simple Ajax Text Replacement - use dynamic text in blog posts
Raw
example.html
<html>
<head>
<link rel="import" href="https://cdn.rawgit.com/brettneese/f2129e849fefd339b2d525fa6d47b544/raw/bd0c75228d673966a41b8d7d4a23915725e78cfb/index.html">
</head>
<body>
<json-data url="https://jsonplaceholder.typicode.com/posts/1" selector="body"></json-data>
</body>
</html>
Raw
index.html
<html>
<head>
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/clementlamoureux/JSONPath/master/lib/jsonpath.js"></script>
<link rel="import" href="https://rawgit.com/Download/polymer-cdn/1.8.0/lib/iron-ajax/iron-ajax.html">
</head>
<body>
<!-- Define the component -->
<dom-module id="json-data">
<template>
<iron-ajax auto url=[[url]] handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax>
<div>[[_getSelectedData(ajaxResponse, path)]]</div>
</template>
<script>
window.addEventListener('WebComponentsReady', function () {
Polymer({
is: 'json-data',
properties: {
url: String,
path: String
},
_getSelectedData: function (data, path) {
console.log(jsonPath.eval(data, path));
return jsonPath.eval(data, path);
}
});
})
</script>
</dom-module>
<!-- use the component
<json-data url="https://jsonplaceholder.typicode.com/posts/1" path="$.body"></json-data>-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment