Build a repeater element using JSON

Hi Guys,

I have been using another application ( www.applicationcraft.com ) that have a very easy way to get data and populate widgets so I have been hidden from the ‘real world’ .

I know how to get the JSON data back from a PHP file.

My data is returned as

[{“lessonsID”:“1”,“categoriesID”:“1”,“name”:“Asbestos Awareness”,“lessonImage”:“http://www.toolfolks.com/techy/safety/imageAssetts/manDanger.png"},{“lessonsID”:“2”,“categoriesID”:“1”,“name”:“Lifting”,“lessonImage”:“http://www.toolfolks.com/techy/safety/imageAssetts/manLift.png”},{“lessonsID”:“3”,“categoriesID”:“1”,“name”:“Other”,“lessonImage”:“http://www.toolfolks.com/techy/safety/imageAssetts/wavesBackground.jpg”},{“lessonsID”:“4”,“categoriesID”:“2”,“name”:“Other”,“lessonImage”:“http://www.toolfolks.com/techy/safety/imageAssetts/manLungs.png”},{“lessonsID”:“5”,“categoriesID”:“2”,“name”:“Other”,“lessonImage”:“http://www.toolfolks.com/techy/safety/imageAssetts/cloudBackground.jpg”},{“lessonsID”:“6”,“categoriesID”:“2”,“name”:“Other”,“lessonImage”:“http://www.toolfolks.com/techy/safety/imageAssetts/asbestos2.jpg”},{“lessonsID”:“7”,“categoriesID”:“2”,“name”:“Other”,“lessonImage”:"http://www.toolfolks.com/techy/safety/imageAssetts/asbestos1.jpg”}]

So as an example I am trying to re-create the following http://www.toolfolks.com/offers/offers.html but using the JSON data to populate the images. So the images need to be 30% width and scale okay on different devices.

So If I add another 4 products in caterory1 the panel will expand to accept them.

I then need to add an click event on each Image that gives me the lessonID.
I then add a label below each image with the value of ‘name’.

This will get me going to the next level.

offers.hype.zip (895.9 KB)

The button calls the PHP file and brings back the data.

Cheers

Steve Warby

You can’t create Hype-driven elements on the fly, so this would be more vanilla DOM manipulation to create the elements. in general, you’d want to iterate the return value and then use the document.createElement() method and set everything up.

@MarkHunte provided a clone hypeelement function (hype extensions) … you may test it … btw this won’t be supported by hype

as it’s easy to clone hypeelements be sure to remove any attr, id, class responding to hypes runtime

1 Like

No idea where to start. Has anyone got a simple example.
// Create a group (with border / corners/ and 90% width )
for (var i = 0; i < lessonsArray.length; i++) {
// Insert a new image set to 30% width;
//Insert a text label with text = ‘name’;
// Set an on click event on each image to alert(‘lessonImage’);

}

Cheers

Steve Warby

This is a quick example.

This is the code called by the button.

    	    window.catList =[];
         
        	 $.ajax({
            url: 'http://www.toolfolks.com/techy/getLessons.php',
            async: false, //-- makes request synchronous so we can get globals working.  see http://stackoverflow.com/a/3222509/261305
            type: 'POST',
            dataType: 'JSON',
            data: {
                           },
             success: function (res) {
             
             	window.catList = res;

                    }
        });
         
         
     //--To Test 
      /*
    window.catList = [{"lessonsID":"1","categoriesID":"1","name":"Asbestos Awareness","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/manDanger.png"},
     {"lessonsID":"2","categoriesID":"1","name":"Lifting","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/manLift.png"},
     {"lessonsID":"3","categoriesID":"1","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/wavesBackground.jpg"},
     {"lessonsID":"4","categoriesID":"2","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/manLungs.png"},
     {"lessonsID":"5","categoriesID":"2","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/cloudBackground.jpg"},
     {"lessonsID":"6","categoriesID":"2","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/asbestos2.jpg"},
     {"lessonsID":"7","categoriesID":"2","name":"Other","lessonImage":"http:\/\/www.toolfolks.com\/techy\/safety\/imageAssetts\/asbestos1.jpg"}]
    */


         
         
        for (index = 0; index < window.catList.length; index++) { 
        var catid = 'categoriesID' + window.catList[index]['categoriesID'];

         doClone(index,catid);
         

        }


        function doClone(index,categoriesID){
         

         
        if (!window.idIndex) { window.idIndex = 1};
            	 	
            		var originalElement  = hypeDocument.getElementById('groupOrig'); 
             
             		// Clone to a Div/Group in the scene  
             		var append_the_clone_To =  hypeDocument.getElementById(categoriesID);  
         
             
             
             //-- clone
           
          
           var thisCloneElemenet =  hypeDocument.cloneElement(originalElement,append_the_clone_To,'imageGroupClone'+ window.idIndex,'imageGroupClone',0,0  ,2000)
         
         
         //-- update clone
        var imageClone = thisCloneElemenet.querySelector('.imageClone')
        var textClone = thisCloneElemenet.querySelector('.textClone')

        imageClone.style.backgroundImage =  "url('" + window.catList[index]['lessonImage'] + "')";
        textClone.innerHTML = window.catList[index]['name'];
        thisCloneElemenet.onclick = function(){  alert(window.catList[index]['lessonImage']); };

             window.idIndex++;


It uses the clone Extension
So you will need to add that as instructed on the extensions page.


In the project I have added a dummy group with an Image and text. (Both have class names which are used later on)

The dummy Group is what we clone.

The spacing of the clone elements is done with css in the Head. Which simply sets the float and position of the clone groups. This saves us having to work out positions.

The dummy group’s size is what determines the padding between the clones.

The clones then have the attributes added that you want.

The category groups (divs) have ids that are used in the code. They also have scroll bars.

offers_MHv1.hype.zip (148.8 KB)

1 Like

Sorry for the delay in replying been on other things. Thanks for this I’ll start playing around the next few days.

1 Like