Creating a Customizable JSON Endpoint For Content

Zesty.io's custom API JSON endpoints will save your app developers a lot of time by making requesting dynamic data on your frontend quick and easy. Learn more about the Zesty.io headless CMS offering here.

Implementing Custom Endpoints

Before jumping into the steps below we recommend installing a JSON viewer extension for Chrome for effortless viewing and simple debugging JSON.

  1. Navigate to the Web IDE Code section, then locate the "Create File" button at the top of the left-hand navigation, and click it.
  2. Select Custom File Type from the dropdown.
  3. Name your file. The name of this file will be used to reference your custom endpoint. Don't forget to add the leading slash in your file name as the file name gets concatenated to your instance's url. For example if the file is named /test-data the endpoint is referenced at https://www.example.com/test-data.jsonThe preview URL can also be used in place of your live domain.

Note: Make use of the production URL when accessing endpoints. Preview.zesty.io URLs not only show unpublished data but also are not cached.

  1. Copy this code example below, and paste it into your new file

❗️

Note: Don't forget to add the leading slash in your file name as the file name gets concatenated to your instance's url.

{
	"data": [
	
	{{each blog_article as art limit 20 }}
		 {	
		 	"zid"  : {{art.zid}},
			"url"  : "{{art.getUrl()}}",
			"name" : "{{art.title}}",
			"image": "{{art.image.getImage()}}",
			"image_thumbnail": "{{art.image.getImage(200,200,crop)}}",			
			"body" : "{{art.article_body.escapeForJs()}}",
			"tags" : [
				{{each blog_tag as tag where find_in_set(tag.zid,'{art.tags}') }}
					{
						"zid" : {{tag.zid}},
						"name" : "{{tag.name}}"
					}
					(** echo a the comma unless it is the last item **)
					{{if {tag._length} != {tag._num} }},{{end-if}}
				{{end-each}}
			]
		}
		(** echo a the comma unless it is the last item **)
		{{if {art._length} != {art._num} }},{{end-if}}
	{{end-each}}
	]
}
  1. Replace content references in the copied code above with actual content models in your Zesty.io instance. You have full access to Parsley code in this view.

  2. Edit content references as necessary to form proper JSON. We provide .escapeForJS() for WYSIWYG content. To create comma separated lists in an each loop implement calls like {{if {tag._length} != {tab._num} }},{{end-if}}. Or use the new _arraycomma parsley function which appends a comma in your object array and knows when not to put a comma if it's the last item.

  3. Setup optional get parameters like start and limit to make custom pagination calls https://www.yourdomain.com/test-data.json?start=0&limit=5

{
	"data": [
	{{if {get_var.start} }} {{ $start = {get_var.start} }} {{else}} {{$start = 0}} {{end-if}}
	{{if {get_var.limit} }} {{ $limit = {get_var.limit} }} {{else}} {{$limit = 100}} {{end-if}}	
	{{each blog_article as art limit {$start},{$limit} }}
		 {	
		 	"zid"  : {{art.zid}},
			"name" : "{{art.title}}",
			"body" : "{{art.article_body.escapeForJs()}}",
			"tags" : [
				{{each blog_tag as tag where find_in_set(tag.zid,'{art.tags}') }}
					{
						"zid" : {{tag.zid}},
						"name" : "{{tag.name}}"
					}
					(** echo a the comma unless it is the last item **)
					{{if {tag._length} != {tag._num} }},{{end-if}}
				{{end-each}}
			]
		}
		(** echo a the comma unless it is the last item **)
		{{if {art._length} != {art._num} }},{{end-if}}
	{{end-each}}
	]
}