Results 1 to 4 of 4

Thread: Unable to load data using the supplied configuration.

  1. #1

    Default Unable to load data using the supplied configuration.

    JSON DATA
    -------------
    Code:
    [[{"id":"1","name":"[Bible/01.Old]","url":"http://ctgs.myetrayz.net:8000/music/index.php?path=Bible/01.Old"},{"id":"2","name":"[Bible/02.New]","url":"http://ctgs.myetrayz.net:8000/music/index.php?path=Bible/02.New"},{"id":"3","name":"[Bible/03.Sermon]","url":"http://ctgs.myetrayz.net:8000/music/index.php?path=Bible/03.Sermon"}]]
    JS
    --
    Code:
    Ext.define('webmusic.store.Songs', {
        extend: 'Ext.data.Store',
    
        requires: [
            'webmusic.model.Song',
            'Ext.data.proxy.Ajax',
            'Ext.data.reader.Json'
        ],
    
        config: {
            autoLoad: true,
            autoSync: true,
            clearOnPageLoad: false,
            groupField: 'name',
            model: 'webmusic.model.Song',
            remoteGroup: true,
            storeId: 'Songs',
            proxy: {
                type: 'ajax',
                url: 'http://ctgs.myetrayz.net:8000/music/rss2json.html?path=Bible',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        }
    });
    plz, help me !!
    Connections can not know devised an error ?

  2. #2
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    Quote Originally Posted by [email protected] View Post
    JSON DATA
    -------------
    [[{"id":"1","name":"[Bible/01.Old]","url":"http://ctgs.myetrayz.net:8000/music/index.php?path=Bible/01.Old"},{"id":"2","name":"[Bible/02.New]","url":"http://ctgs.myetrayz.net:8000/music/index.php?path=Bible/02.New"},{"id":"3","name":"[Bible/03.Sermon]","url":"http://ctgs.myetrayz.net:8000/music/index.php?path=Bible/03.Sermon"}]]
    Is this data from the same domain that the app is served from?

    If not you will either need a JSONP Proxy with a callback function to return the data, or the service itself needs to have CORS working. I use an Ajax Proxy with my own CORS service and it works good, and if you have control of the service I would recommend implementing it.

    You may know this, but calls from a web browser can only be Cross-Domain if they "fool" the browser like it's accepting a Script File. I know, this doesn't make a whole lotta sense, but by sending a Function name and method block to most services that are expected to always be API's or endpoints, where are designed to "wrap" the requested payload within your Callback. When you receive it, you can process the data. This is also a complex JSON Object, so accessing the various elements may take some trial and error.

    Hope this helps, I need to get back to my stuff right now, but I can help you a bit later if you need it...

    Sincerly,

    Curtis

  3. #3

    Default Unable to load data using the supplied configuration.

    Is this data from the same domain that the app is served from?

    yes !! that is the question. I don't know. please help me.

    so thanks.

    rss2json.html
    ----------------
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8"/>
    	<script type="text/javascript" src="jquery-1.4.4.js" ></script>
    	<script type="text/javascript" src="json2html.js"></script>
    
    	<script type="text/ecmascript">
    		function urldecode (str) {  
    			return decodeURIComponent((str + '').replace(/\+/g, '%20'));
    		}
    		
    		function displayJson(data) {
    		var transform = [{'tag':'li','html':'{id : ${id}, name : ${name} , url : ${url}}'}];
    		document.getElementById('list').innerHTML = json2html.transform(data,transform);
    		}
    
    		$(document).ready(function () {
    			var address = unescape(location.href);
    			var param = "";
    			if(address.indexOf("path", 0) != -1) {
    				param = address.substring(address.indexOf("path", 0) + 5);
    			} else {
    				param = "";
    			}
    
    			$.ajax({
    				type: "GET",
    				url : "http://ctgs.myetrayz.net:8000/music/index.php?path="+param+"&stream=rss",
    				datatype : "jsonp",
    				success: whenSuccess,
    				error: whenError,
    			});
    		});
    		
    		function whenSuccess(xml) {
    			var contentStr = "{"+"\""+"data"+"\""+":[";
    			var num = 0;
    			var total = $(xml).find("item").length;
    			
    			$("#mainSection").append("{"+"\""+"data"+"\""+":[");
    			
    			$(xml).find("item").each( function (index) {
    				num = num + 1;
    				var id = num.toString();
    				var enclosure = $(this).find("enclosure").attr("type");
    				var guid = $(this).find("guid").text();
    				var array = guid.split('=');
    				var title_name = array[array.length - 1];
    				
    				if ( enclosure == "application/x-director" ) {
    					var list_name = urldecode(title_name);
    					var willIn = "{ "+"\""+"id"+"\""+":"+ id +","+"\""+"name"+"\""+":"+"\""+ "["+list_name.trim()+"]" +"\""+","+"\""+"url"+"\""+":"+"\""+ guid.trim()+"\""+"}"
    
    				} else {
    					var title_name_array = title_name.split('.');
    					if (title_name_array[1] == "mp3" ) {
    					var list_name = title_name_array[0];
    					} else {
    						
    						if (title_name_array[2] == "mp3" ) {
    						var list_name = title_name_array[0]+"."+title_name_array[1];
    						} else { 
    						var list_name = title_name_array[0]+"."+title_name_array[1]+"."+title_name_array[2];
    						}
    					}
    					
    					var list_name = urldecode(list_name);
    					var willIn = "{ "+"\""+"id"+"\""+":"+ id +","+"\""+"name"+"\""+":"+"\""+ list_name.trim() +"\""+","+"\""+"url"+"\""+":"+"\""+ guid.trim()+"\""+"}"
    				};
    				
    				var list = $.parseJSON(willIn);
    				
    				if (index == total - 1) {
    				$("#mainSection").append(willIn);
    				contentStr += "{ "+"\""+"id"+"\""+":"+"\""+ list.id +"\""+","+"\""+"name"+"\""+":"+"\""+ list.name+"\""+","+"\""+"url"+"\""+":"+"\""+ list.url+"\""+"}";
    				} else {				
    				$("#mainSection").append(willIn+",");
    				contentStr += "{ "+"\""+"id"+"\""+":"+"\""+  list.id +"\""+","+"\""+"name"+"\""+":"+"\""+list.name+"\""+","+"\""+"url"+"\""+":"+"\""+ list.url+"\""+"}"+ ",";
    				
    				};
    			});
    			
    			$("#mainSection").append("]}");
    			
    			contentStr = contentStr+"]}";
    			var listjson = $.parseJSON(contentStr);
    			listjson = listjson;
    			
    			$("#after").append(listjson);
    			
    			if (listjson != null ) {
    			console.log(listjson.data);
    			arr = []
    			for(var event in listjson){
    			    var dataCopy = listjson[event]
    			    for(key in dataCopy){
    			        if(key == "id" || key == "name" || key == "url"){
    			            dataCopy[key] = new Date(dataCopy[key])
    			        }
    			    }
    			    arr.push(dataCopy)
    			}
    			
    			document.write( "Ext.data.JsonP.callback01("+JSON.stringify(arr) +")");
    			
    			
    			}
    
    		}
    		
    		function whenError() {
    			alert("Error");
    		}
    		
    		
    	</script>
    </head>
    
    <body>
    	<header>
    	<meta http-equiv="Content-Type" content= "application/javascript; access-control-allow-origin = *" >></header>	
    	
    </body>
    </html>
    ------------------------------------------------
    what's the problem ?

  4. #4
    Sencha Premium Member
    Join Date
    Jul 2014
    Location
    Bakersfield CA
    Posts
    81
    Answers
    3

    Default

    Sorry, but I can't do anything with this code example. It looks to be a JQuery/Sencha Hybrid and I can't take the time to try to understand it.

    The best way I found to troubleshoot Data request issues when I was starting out with Sencha was to set my debugger at the Ext.data.Connection::createResponse(request) method and look at my call stack up to that point. I would check that my request is going out properly formed and and coming back with data.

    If the data is coming back, then it really is a matter of making sure that the everything else in the consuming classes (these classes receive the response then attempt to bind the data to the model) is doing its job.

    Here is what I would do in your case...

    1. Confirm the request is getting a response in the Chrome Network Tab
    2. Create an Event Binding the Load on your Store - I'm assuming that you are using Architect because this is the forum for it
    3. Set a logger at that point like so...
    Ext.Logger.log('************************* CONTROL VALUES STATE BELOW **********************************************');
    //Ext.Logger.log(this.self.getName()+'::onJsonstoreLoad is TESTING the values of shared.constants.Config = '+shared.constants.Config.toString());
    //Ext.Logger.log('************************* CONTROL VALUES STATE ABOVE **********************************************');
    (This is just an example of how to track the request and response)

    4. Set a breakpoint on the logger and then examine the response in the onJsonstoreLoad Event.

    This is a good starting point. Once you are here, you can expect to see your request with data like this...Screen Shot 2014-12-05 at 7.27.34 AM.jpg

    If you don't see the data, then look back on the Call stack...
    Screen Shot 2014-12-05 at 7.37.55 AM.png

    This is effectively a timeline of everything that happened. Stay on your breakpoint and select each of the calls and look at the code. Set additional breakpoints at places you might suspect are critical. I would most likely begin at the Ext.data.Connection#onStateChange event and set breakpoints at the place where the request comes back.

    Ok, if I haven't frustrated you with meaningless stuff that you already know, then that's about all I can offer right now. Once you are at this level of understanding, data operations aren't so much of a black box.

    Unfortunately, it is mind-numbing to trace issues in data requests. Before you begin, check the usual suspects...

    1. Does your model match the JSON String Response exactly? I mean Case-Wise and Container-Wise.
    Let's look at it...
    Code:
    [[{"id":"1","name":"[Bible/01.Old]","url":"http://ctgs.myetrayz.net:8000/music/index.php?path=Bible/01.Old"},{"id":"2","name":"[Bible/02.New]","url":"http://ctgs.myetrayz.net:8000/music/index.php?path=Bible/02.New"},{"id":"3","name":"[Bible/03.Sermon]","url":"http://ctgs.myetrayz.net:8000/music/index.php?path=Bible/03.Sermon"}]]
    You have id, name, url in all the Objects - Your Model should have the EXACT (Case-Wise) names for fields.

    Next, Container-Wise check. First, I see there are two Arrays here. [[ ]] are the start and end notations. This actually means to a JSON Parser that it will return two objects, and Outer Array that has another Array within it. So that is a possible problem concerning what the Parser will do when it makes Objects out of this String.
    Below is example of a JSON String that works as a response...
    Code:
    [{"wellTestID":"well:test:a2856d31-6237-4a5a-91f8-881f26622a01","wellFacilityID":5580,"operatorName":"Operator 3","testBeginDate":"06/26/2013","testLengthSeconds":86400,"grossRate":28,"waterCut":86,"percentGas":0,"temperature":0,"flowLinePressure":0,"casingPressure":0,"allocation":1,"wellTestTypeID":11,"rowFlag":null},{"wellTestID":"well:test:98495b2d-6bcb-46eb-a4cc-53aa14d6cf59","wellFacilityID":5580,"operatorName":"Operator 2","testBeginDate":"10/23/2012","testLengthSeconds":86400,"grossRate":6,"waterCut":96,"percentGas":0,"temperature":0,"flowLinePressure":50,"casingPressure":16,"allocation":1,"wellTestTypeID":1,"rowFlag":null},{"wellTestID":"well:test:500412c7-f319-4707-9838-6a7a8069569d","wellFacilityID":5580,"operatorName":"Operator 3","testBeginDate":"12/07/2012","testLengthSeconds":14400,"grossRate":11,"waterCut":86,"percentGas":0,"temperature":0,"flowLinePressure":60,"casingPressure":10,"allocation":0,"wellTestTypeID":1,"rowFlag":null}]
    As you can see, there are 3 records that match with my Model Definition...
    Code:
           fields: [
                {
                    name: 'wellTestID',
                    type: 'auto'
                },
                {
                    name: 'wellFacilityID',
                    type: 'int'
                },
                {
                    name: 'operatorName',
                    type: 'string'
                },
                {
                    dateFormat: '',
                    name: 'testBeginDate',
                    type: 'string'
                },
                {
                    name: 'testLengthSeconds',
                    type: 'int'
                },
                {
                    name: 'grossRate',
                    type: 'float'
                },
                {
                    name: 'waterCut',
                    type: 'float'
                },
                {
                    name: 'percentGas',
                    type: 'int'
                },
                {
                    name: 'temperature',
                    type: 'float'
                },
                {
                    name: 'flowLinePressure',
                    type: 'float'
                },
                {
                    name: 'casingPressure',
                    type: 'float'
                },
                {
                    name: 'allocation',
                    type: 'int'
                },
                {
                    name: 'wellTestTypeID',
                    type: 'int'
                },
                {
                    name: 'rowFlag',
                    type: 'string'
                }
            ],
    You get the idea right?

    So begin with the basics and you will get through this soon...
    Keep your mind wide open...

    Curtis

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •