CoCreate-fetch

Fetch & filter data stored in database to render a list of document using HTML5 attributes. Great for creating blogs, shopping items, datatables etc.

Install

npm i @cocreate/cocreate-fetch

Or you can use cdn link:

<script>https://cdn.cocreate.app/fetch/latest/CoCreate-fetch.min.js</script>

for styling please refer to #id-style

Dependencies

CoCreate.js, CoCreate-logic.js, CoCreate-utils.js, CoCreate-filter.js, CoCreate-render.js,

Usage

CoCreate-fetch would fetch data from db by attributes, and then render data into the elements based on CoCreate-render.js

Example

Fetch Array case


	<div class="card"
		template_id="temp2"
		fetch-collection="render_test"
		filter-value="5f5aeace3a7246b7cf2e3ffc"
		filter-name="_id"
		filter-operator="$eq"
		fetch-name="jsonArray">
		<div class="template" template_id="temp2" value="{{email}}">
			<h4 value="{{email}}" name="email"></h4>
			<h4 value="{{home}}" name="home"></h4>
		</div>	
	</div>
					

Documents fetch case


	<div class="card"
		template_id="render_testing"
		fetch-collection="render_test"
		filter-value="render"
		filter-name="type"
		data-redner_id="testing"
		filter-operator="$eq">
		<div class="template" template_id="render_test" value="{{testing.data._id}}" render-array="testing.data">
			<h3 data-attribute="email" value="{{testing.data.email}}" name="email" value="{{testing.data.email}}"></h3>
			<h4 collection="{{testing.collection}}" name="home" value="{{testing.data.home}}"></h4>
			<h4 name="other_email" value="{{testing.data.personal_info.email}}"></h4>
			<div class="template display:flex justify-content:space-between" render-array="testing.data.jsonArray" render-key="sub_jsonArray">
				<h5 name="email" value="{{sub_jsonArray.email}}"></h5>
				<h5 name="home" value="{{sub_jsonArray.home}}"></h5>
			</div>
			<div class="template display:flex justify-content:space-between" render-array="testing.data.stringArray" value="--">
				<h5 name="email" value="--"></h5>
			</div>
		</div>
	</div>
					

Attributes

  • template_id string required

    Template identifier. This attribute should be define.

  • fetch-collection string required

    Collection name to fetch data. It is required.

  • fetch-name string optional

    Define the field name to fetch array

    If this value defined, it will fetch the special field's value

  • filter-value string optional

    Define the value to filter by . Require fetch-name

    colleciton: whole collections list fetch.

  • filter-value-type string optional

    collection

    colleciton: whole collections list fetch.

  • fetch-count string optional

    Fetch the item's count on page load or when updated. If attribute is empty or not used, total items will be fetch.

  • order-by string optional

    Field name to sorting.

  • order-type string optional

    Available value: asc | desc.

    Fetch order value on page load or when updated. If attribute is empty or not used Default's to asc.

  • render_id string optional

    This value should define in template wrapper.

    Mulitple template case, render_id would use that generate new object by this value

How Does It Works

CoCreate-fetch works based on cocreate.js and template.

To fetch the array data, the template wrapper should define fetch-collection. template_id

Effects and Styles

Events

fetchedTemplate

Demo