I'm learning to use Kendo with jQuery.
I have downloaded a sample Kendo UI from their website and am adding an autocomplete widget for employees which needs to be sourced from 'employees-list.json'
I have successfully implemented the autocomplete widget using hard coded data:
<p>Search Member: <input id="member-auto-complete" /></p>
<script>
$('#member-auto-complete').kendoAutoComplete({
dataSource: ["Ant", "Antilope", "Badger", "Beaver", "Bird"]
});
}
</script>
I need help to replace the dataSource with the json file. Here is an example of how Kendo uses employees.json as a data source in a different widget 'kendoScheduler':
$("#employee-sales").kendoScheduler({
autoBind:false,
date: new Date("1996, 7, 1"),
views: ["month"],
editable:false,
timezone: "Etc/UTC",
dataSource:{
transport:{
read: {
url: "./content/employee-sales.json",
crossDomain: true,
dataType: "jsonp",
jsonp: false,
jsonpCallback: "callback_es"
}
},
And here is my attempt to do the same which is returning [object, Object] for each employee where instead I want their names.
$('#member-auto-complete').kendoAutoComplete({
dataSource: {
transport: {
read: {
url: './content/employees-list.json',
crossDomain: true,
dataType: "jsonp",
jsonp: false,
jsonpCallback: "callback_el"
}
},
}
})
And here is the content of employees.json
callback_el([{"EmployeeID":2,"FirstName":"Andrew","EmployeeName":"Andrew Fuller","LastName":"Fuller","Title":"Vice President, Sales","Country":null,"City":null,"Address":null,"HomePhone":"(206) 555-9482","Notes":"Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association."},{"EmployeeID":9,"FirstName":"Anne","EmployeeName":"Anne Dodsworth","LastName":"Dodsworth","Title":"Sales Representative","Country":null,"City":null,"Address":null,"HomePhone":"(71) 555-4444","Notes":"Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German."},{"EmployeeID":3,"FirstName":"Janet","EmployeeName":"Janet Leverling","LastName":"Leverling","Title":"Sales Representative","Country":null,"City":null,"Address":null,"HomePhone":"(206) 555-3412","Notes":"Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992."},{"EmployeeID":8,"FirstName":"Laura","EmployeeName":"Laura Callahan","LastName":"Callahan","Title":"Inside Sales Coordinator","Country":null,"City":null,"Address":null,"HomePhone":"(206) 555-1189","Notes":"Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French."},{"EmployeeID":4,"FirstName":"Margaret","EmployeeName":"Margaret Peacock","LastName":"Peacock","Title":"Sales Representative","Country":null,"City":null,"Address":null,"HomePhone":"(206) 555-8122","Notes":"Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992."},{"EmployeeID":6,"FirstName":"Michael","EmployeeName":"Michael Suyama","LastName":"Suyama","Title":"Sales Representative","Country":null,"City":null,"Address":null,"HomePhone":"(71) 555-7773","Notes":"Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles (MBA, marketing, 1986). He has also taken the courses \"Multi-Cultural Selling\" and \"Time Management for the Sales Professional.\" He is fluent in Japanese and can read and write French, Portuguese, and Spanish."},{"EmployeeID":1,"FirstName":"Nancy","EmployeeName":"Nancy Davolio","LastName":"Davolio","Title":"Sales Representative","Country":null,"City":null,"Address":null,"HomePhone":"(206) 555-9857","Notes":"Education includes a BA in psychology from Colorado State University in 1970. She also completed \"The Art of the Cold Call.\" Nancy is a member of Toastmasters International."},{"EmployeeID":7,"FirstName":"Robert","EmployeeName":"Robert King","LastName":"King","Title":"Sales Representative","Country":null,"City":null,"Address":null,"HomePhone":"(71) 555-5598","Notes":"Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 1992, the year he joined the company. After completing a course entitled \"Selling in Europe,\" he was transferred to the London office in March 1993."},{"EmployeeID":5,"FirstName":"Steven","EmployeeName":"Steven Buchanan","LastName":"Buchanan","Title":"Sales Manager","Country":null,"City":null,"Address":null,"HomePhone":"(71) 555-4848","Notes":"Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \"Successful Telemarketing\" and \"International Sales Management.\" He is fluent in French."}]);
You simply need to supply the dataTextField option to let it know which field in your data source objects to use.
For example
$('#member-auto-complete').kendoAutoComplete({
dataTextField: "EmployeeName"
dataSource: {
// ...
}
});
Related
To clear things up, I have an agenda where when I click a cell it opens up a modal window with certain gien information. At first I tried to use an iframe to pull in that information based off an attribute that the td element had. However, I am switching gears and I am now using data from a JSON array. When the data-ticker attribute is found in the array, I would like that information displayed on the modal window. However, I am confused as to how to use that data-ticker attribute as a search criteria.
<script>
const myRequest = new Request('_mmdata.json');
fetch(myRequest)
.then(response => response.json())
.then(data => obj = data)
.then(() =>
let searchVal = document.querySelector('[data-ticker]');
obj.values(data).forEach(e=>{
if(e.page === searchVal){
console.log("This is the object: ");
console.log(e);
}
});
)
/* console.log(obj[0].name))*/
</script>
Here, I would like to use the same "data-ticker" attribute but I am not sure where to go from here.
<body>
<div class="modalWindow_container" id='modal1'>
<div class="modalWindow">
<div class="sidenav">
<i class="material-icons">event</i> Presentation
<i class="material-icons">person</i> Speakers
<i class="material-icons">link</i> Links
</div>
<br/>
<div style='text-align:right'>
<div class='button ok' onclick="hideModal()"><i class="material-icons">clear</i></div>
</div>
<iframe id="a" src="about.html"></iframe>
<iframe id="b" src="about2.html" style="display:none"></iframe>
</div>
</div>
<div class="tabs">
<ul class="tabs-list">
<li class="active">Day 1</li>
<li>Day 2</li>
</ul>
<div id="tab1" class="tab active">
<table>
<thead>
<tr>
<th><div class="tzh">Time (ET)</div></th>
<th>Track I</th>
<th>Track II</th>
<th>Track III</th>
<th>Track IV</th>
</tr>
</thead>
<tbody>
<tr>
<th>08:00</th>
<td data-ticker="syf" colspan="1" rowspan="2" class="pres">Presentation Title<span>8:00 - 9:00</span><span>Presenter</span></td>
<td data-ticker="about4" colspan="1" rowspan="2" class="pres">Presentation Title<span>8:00 - 9:00</span><span>Presenter</span></td>
<td></td>
<td></td>
</tr>
_mmdata.json
[
{
"page": "syf",
"name": "Synchrony Financial",
"presenters": [
{
"company": "Synchrony Financial",
"name": "Brian Doubles",
"bio": "Brian Doubles is President of Synchrony, one of the nation’s premier consumer financial services companies.\r\nBrian is focused on Synchrony’s continued leadership in digital payments, accelerating growth across the company\r\nand driving the company’s strategic initiatives. Brian leads several key functions, including business strategy, venture\r\ninvestments and M&A, enterprise data analytics, customer experience, marketing (including new product introduction,\r\nproduct management and digital platforms) and the expansion of the company’s direct-to-consumer banking and\r\nproducts strategy.\r\nBrian was named President in May 2019, after serving as Executive Vice President and Chief Financial Officer for 10 years.\r\nAs CFO, he played a pivotal role in Synchrony’s initial public offering in 2014 and separation from GE in 2015. He was also\r\nresponsible for investor relations, financial planning and analysis, tax and treasury. Brian has a proven track record\r\noperating in various economic cycles and has earned a strong reputation for his deep domain expertise, strategic thinking,\r\nand financial and risk discipline. Prior to Synchrony’s founding, Brian served in various roles of increasing responsibility and\r\nmanagement at GE.\r\nBrian founded the Doubles Dive, an annual polar plunge event to raise money for various charitable organizations globally.\r\nHe earned a bachelor’s degree in engineering from Michigan State University. He is married with two children.",
"title": "President",
"pic": "/upload/event_68171/inv/3253491/Brian-dlpx (1).jpg"
},
{
"company": "Synchrony Financial",
"name": "Brian Wenzel",
"bio": "Brian Wenzel is Executive Vice President and Chief Financial Officer of Synchrony, one of the nation’s premier consumer financial\r\nservices companies.\r\nAs CFO, Brian ensures the continued execution of Synchrony’s financial and growth objectives, bringing a deep understanding\r\nof Synchrony’s business, people and partners to help drive sustainable earnings and long-term strategic objectives. His\r\nresponsibilities include accounting and controllership, financial planning and analysis, tax, investor relations and treasury.\r\nPrior to his current role, Brian was Synchrony’s Deputy Chief Financial Officer, and earlier, the Chief Financial Officer of the Retail\r\nCard platform. As a member of the Retail Card leadership team, he helped develop and expand key partnerships, while taking\r\nresponsibility for strategic plans, quarterly operating results and financial management of new and\r\nexisting relationships.\r\nPrior to Synchrony’s founding, Brian held several roles in financial planning and analysis, treasury, pricing and controllership for\r\nvarious divisions at GE. Earlier, Brian worked for PricewaterhouseCoopers and held various roles in a start-up healthcare venture.\r\nBrian earned a bachelor’s degree in accounting from Marist College. He is married with three children.",
"title": "CFO",
"pic": "/upload/event_68171/inv/3253493/Wenzel_Portrait_4785_4887.jpg"
}
],
"profile": "Synchrony (NYSE: SYF) is a premier consumer financial services company. We deliver a wide range of specialized financing programs, as well as innovative consumer banking products, across key industries including digital, retail, home, auto, travel, health and pet. Synchrony enables our partners to grow sales and loyalty with consumers. We are one of the largest issuers of private label credit cards in the United States; we also offer co-branded products, installment loans and consumer financing products for small- and medium-sized businesses, as well as healthcare providers.\r\n\r\nSynchrony is changing what’s possible through our digital capabilities, deep industry expertise, actionable data insights, frictionless customer experience and customized financing solutions.\r\n\r\nFor more information, visit www.synchrony.com and Twitter: #Synchrony.",
"logo": "/upload/event_68171/inv/3208967/syflogo.jpg"
},
{
"page": "axp",
"name": "American Express Company",
"presenters": [
{
"company": "American Express Company",
"name": "Jeff Campbell",
"bio": "Jeff Campbell joined American Express Company in July 2013 as Chief Financial Officer, overseeing the company's financial operations worldwide as well as Corporate Development. \r\n\r\nAs a member of the American Express Executive Committee and an officer of the company, Jeff plays an important role in developing the strategic direction for American Express and represents the company to the financial community. In August 2019, he assumed additional responsibility as the CFO and as an officer of American Express National Bank. \r\n\r\nBefore joining American Express, Jeff was CFO of the McKesson Corporation, the largest healthcare services company in the United States. He played an essential role as McKesson grew significantly and expanded its leadership in healthcare distribution and technology.\r\n \r\nPrior to his time at McKesson, Jeff spent 13 years at AMR Corp and its principal subsidiary American Airlines, ultimately becoming the company's CFO in 2002. He held a variety of financial and operations positions at American, including leading the company’s Europe, Middle East, and Africa operations while based in London. He began his professional career as a certified public accountant and management consultant with Deloitte, Haskins & Sells.\r\n \r\nJeff has been a board member of Hexcel Corporation since 2003, where he chairs the Audit Committee and is the lead director. He joined the board of Aon plc in 2018. He is also a board member of the Lincoln Center for the Performing Arts.\r\n \r\nHe holds an undergraduate degree in Economics from Stanford University and received his Masters of Business Administration from Harvard University in 1990.\r\n \r\nHe and his wife live in New York and have three children.\r\n\r\n",
"title": "CFO",
"pic": "/upload/event_68171/inv/3209001/campbell.jpg"
}
],
"profile": "",
"logo": "/upload/event_68171/inv/3209001/AXP.png"
},
I took data from a text file i.e sample_resume.txt
Name: John Doe
Phone: (555) 555-5555
Email: johndoe#example.com
OBJECTIVE
Excel in a web developer career.
KEY SKILLS
Development: HTML5, JavaScript, Bootstrap, AngularJS, ReactJS, CSS3, Media Queries, Development
Project Management: JIRA, Bitbucket, Confluence, Git, GitHub
EMPLOYMENT HISTORY
Title: Junior Web Developer
Company: Apple Inc.
Dates: June 2015 to September 2016
* Developed responsive corporate websites
* Did some cool stuff
* Led team in closing out JIRA bugs
and imported it into my angular project using a controller
app.controller('MainController', function ($scope, $http) {
$http.get('../../documents/sample_resume.txt')
.then(function (data) {
$scope.info = data;
}, function (error) {
alert('error');
});
});
I expected the output in Json format to be divided in to key value pairs of the data but the output is
{"data":"Name: John Doe \r\nPhone: (555) 555-5555 \r\nEmail: johndoe#example.com\r\n\r\nOBJECTIVE \r\nExcel in a web developer career.\r\n\r\nKEY SKILLS\r\nDevelopment: HTML5, JavaScript, Bootstrap, AngularJS, ReactJS, CSS3, Media Queries, Development\r\nProject Management: JIRA, Bitbucket, Confluence, Git, GitHub\r\n\r\nEMPLOYMENT HISTORY\r\nTitle: Junior Web Developer\r\nCompany: Apple Inc. \r\nDates: June 2015 to September 2016\r\n* Developed responsive corporate websites\r\n* Did some cool stuff\r\n* Led team in closing out JIRA bugs\r\n\r\nTitle: Web Development Intern \r\nCompany: Google Inc.\r\nDates: January 2015 to May 2015\r\n* Went on coffee runs for the team\r\n* Team record for longest keg stand\r\n* Once ate 82 cupcakes during a team building event\r\n\r\nEDUCATION\r\nDegree: BBA \r\nSchool: Michigan State University\r\nGPA: 2.2\r\nMajor: Computer Science\r\nMinor: Drinking","status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"../../documents/sample_resume.txt","headers":{"Accept":"application/json, text/plain, /"}},"statusText":"OK"}
i need the data, split into key value pairs like:
{"Name": "John Doe",
Phone: (555) 555-5555}
Ok, if parsing the text into an array of key value pairs, splitted by the ":" in the text, this code will do what you want. However, if you actually control this text file output, I would consider making it a json file with exact structure you need.
I am asuming AngularJS here, hence putting the "kvp" array on the scope.
var lines = response.data.split('\r\n'); //split by the newlines
$scope.kvp = [];
lines.forEach(function(line, index) {
var pair = line.split(':'); //split by colon
if (pair.length === 2) { //do we have a pair?
$scope.kvp.push({
key: pair[0],
value: pair[1]
});
} else {
if (index > 0) {
if ($scope.kvp[$scope.kvp.length - 1]) {
$scope.kvp[$scope.kvp.length - 1].value += pair[0]; //append last known pair
}
}
}
});
Here is a working JSFiddle:
https://jsfiddle.net/workingClassHacker/shL8od16/7/
How can i insert a loop and view for one or more jpg screenshot-urls from json-variable "screenshotUrls"?
$.getJSON("https://itunes.apple.com/lookup?id=343200656&callback=?", function (data) {
var icon = document.getElementById("icon");
var name = document.getElementById("name");
var description = document.getElementById("description");
icon.src = data.results[0].artworkUrl100;
name.innerHTML = data.results[0].trackName;
description.innerHTML = data.results[0].description;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appicon"><img id="icon"></div>
<h3 id="name">.</h3>
<p id="description">.</p>
When I call that URL ( https://itunes.apple.com/lookup?id=343200656&callback=? <-- make sure to copy that ? too, becuase SO removes it from the hyperlink, probably because it is invalid. BUT it is included in the original URL in the script... ) , this is the response:
{
"errorMessage":"Invalid value(s) for key(s): [callback]",
"queryParameters":{"output":"json", "callback":"A javascript function to handle your search results", "country":"ISO-2A country code", "limit":"The number of search results to return", "term":"A search string", "lang":"ISO-2A language code"}
}
If I were you, I would start there before looking any further.
In the meantime (We are having a little discussion about the trailing ? after the callback=? in the original URL. That gives an error for me). I use the one without the last ? in the URL. (It is also invalid to put two ? in the url)
How to use the response?
Symply do something like this:
var myResp = data;
Next use myResp as an object with properties (name/value paisr)
For example:
myResp.resultCount <-- will return 1
The response looks like the following to me:
{
"resultCount":1,
"results": [
{
"screenshotUrls":["http://a4.mzstatic.com/us/r30/Purple5/v4/37/00/46/37004662-657e-1964-a0dd-1266ddf6e096/screen320x320.jpeg", "http://a4.mzstatic.com/us/r30/Purple69/v4/49/16/ba/4916ba99-3c0f-1b18-b873-a509e8b7a5e3/screen320x320.jpeg", "http://a2.mzstatic.com/us/r30/Purple7/v4/4e/0b/56/4e0b56da-8dcd-8be2-d07a-64631ff45295/screen320x320.jpeg", "http://a4.mzstatic.com/us/r30/Purple7/v4/e6/16/94/e6169414-818b-a86c-f37c-4bad6a9f1f6f/screen320x320.jpeg", "http://a1.mzstatic.com/us/r30/Purple69/v4/9b/a1/6f/9ba16f4f-99bd-36a2-fccd-c3edfa181ff3/screen320x320.jpeg"], "ipadScreenshotUrls":[], "artworkUrl512":"http://is3.mzstatic.com/image/thumb/Purple5/v4/80/28/4c/80284c71-3c6b-470c-00a3-b7129e4ab814/source/512x512bb.jpg", "artistViewUrl":"https://itunes.apple.com/us/developer/rovio-entertainment-ltd/id298910979?uo=4", "artworkUrl60":"http://is3.mzstatic.com/image/thumb/Purple5/v4/80/28/4c/80284c71-3c6b-470c-00a3-b7129e4ab814/source/60x60bb.jpg", "artworkUrl100":"http://is3.mzstatic.com/image/thumb/Purple5/v4/80/28/4c/80284c71-3c6b-470c-00a3-b7129e4ab814/source/100x100bb.jpg", "isGameCenterEnabled":true, "kind":"software", "features":["gameCenter"],
"supportedDevices":["iPhone-3GS", "iPhone4", "iPodTouchFourthGen", "iPad2Wifi", "iPad23G", "iPhone4S", "iPadThirdGen", "iPadThirdGen4G", "iPhone5", "iPodTouchFifthGen", "iPadFourthGen", "iPadFourthGen4G", "iPadMini", "iPadMini4G", "iPhone5c", "iPhone5s", "iPhone6", "iPhone6Plus", "iPodTouchSixthGen"], "advisories":[], "languageCodesISO2A":["EN", "FR", "DE", "IT", "JA", "PT", "RU", "ZH", "ES", "ZH"], "fileSizeBytes":"71674372", "sellerUrl":"http://www.angrybirds.com/", "averageUserRatingForCurrentVersion":4.0, "userRatingCountForCurrentVersion":1195, "trackContentRating":"4+", "trackCensoredName":"Angry Birds", "trackViewUrl":"https://itunes.apple.com/us/app/angry-birds/id343200656?mt=8&uo=4", "contentAdvisoryRating":"4+", "minimumOsVersion":"6.0", "formattedPrice":"$0.99", "currency":"USD", "wrapperType":"software", "version":"6.0.1", "artistId":298910979, "artistName":"Rovio Entertainment Ltd", "genres":["Games", "Arcade", "Entertainment", "Action"], "price":0.99,
"description":"Use the unique powers of the Angry Birds to destroy the greedy pigs' defenses!\u2028\u2028\n\nThe survival of the Angry Birds is at stake. Dish out revenge on the greedy pigs who stole their eggs. Use the unique powers of each bird to destroy the pigs’ defenses. Angry Birds features challenging physics-based gameplay and hours of replay value. Each level requires logic, skill and force to solve.\u2028\u2028\n\nIf you get stuck in the game, you can purchase the Mighty Eagle! Mighty Eagle is a one-time in-app purchase in Angry Birds that gives unlimited use. This phenomenal creature will soar from the skies to wreak havoc and smash the pesky pigs into oblivion. There’s just one catch: you can only use the aid of Mighty Eagle to pass a level once per hour. Mighty Eagle also includes all new gameplay goals and achievements!\u2028\u2028\n\nIn addition to the Mighty Eagle, Angry Birds now has power-ups! Boost your birds’ abilities and three-star levels to unlock secret content! Angry Birds now has the following amazing power-ups: Sling Scope for laser targeting, King Sling for maximum flinging power, Super Seeds to supersize your birds, and Birdquake to shake pigs’ defenses to the ground!\u2028\u2028\n\nHAVING TROUBLE? Head over to https://support.rovio.com where you can browse FAQs or submit a request to our support flock!\n\n#1 IPHONE PAID APP in US, UK, Canada, Italy, Germany, Russia, Sweden, Denmark, Finland, Singapore, Poland, France, Netherlands, Malta, Greece, Austria, Australia, Turkey, UAE, Saudi Arabia, Israel, Belgium, Norway, Hungary, Malaysia, Luxembourg, Portugal, Czech Republic, Spain, Ireland, Romania, New Zealand, Latvia, Lithuania, Estonia, Nicaragua, Kazakhstan, Argentina, Bulgaria, Slovakia, Slovenia, Mauritius, Chile, Hong Kong, Pakistan, Taiwan, Colombia, Indonesia, Thailand, India, Kenya, Macedonia, Croatia, Macau, Paraguay, Peru, Armenia, Philippines, Vietnam, Jordan and Kuwait. \u2028\u2028\n\n#1 IPHONE PAID GAME in more countries than we can count!\n\nTerms of Use: http://www.rovio.com/eula\u2028\nPrivacy Policy: http://www.rovio.com/privacy\u2028\n\nThis application may require internet connectivity and subsequent data transfer charges may apply.\n\n\nImportant Message for Parents\n\nThis game may include:\n- Direct links to social networking websites that are intended for an audience over the age of 13.\n- Direct links to the internet that can take players away from the game with the potential to browse any web page.\n- Advertising of Rovio products and also products from select partners.\n- The option to make in-app purchases. The bill payer should always be consulted beforehand.", "trackName":"Angry Birds", "trackId":343200656, "bundleId":"com.clickgamer.AngryBirds", "releaseDate":"2009-12-11T08:00:00Z", "primaryGenreName":"Games", "isVppDeviceBasedLicensingEnabled":true, "currentVersionReleaseDate":"2015-12-11T08:02:04Z", "releaseNotes":"The #1 App of all time turns 6!\nJoin the celebration in 15 all-new levels in the BirdDay episode!", "sellerName":"Rovio Entertainment Ltd", "primaryGenreId":6014, "genreIds":["6014", "7003", "6016", "7001"], "averageUserRating":4.5, "userRatingCount":822974}]
}
Now, how do you want to proceed?
EDIT: You want all screenshot url.
You can go there with something like:
myResp.results[0].screenshotUrls <-- will be an array.
I haven't checked the code, but just inspect the JSON response, and try to go to the desired element, paying attention to the craziness of the response, that is a mix of object and array notation.
$(document).ready(function() {
$.getJSON("http://quanta.net16.net/wordpressnew/test.php?jsoncallback=?", function(data) {
alert('swag');
});
});
this is my json call and my json is wrapped properly in ?({object})
but the alert is not popping it doesn't show any javascript errors
please help with any possible fixes
link to json creating php
the url is open for access if required
The output of the request is:
?([{"id":84,"title":"Solar Decathlon","url":"http:\/\/quanta.net16.net\/wordpressnew\/wp-content\/uploads\/2015\/12\/grp4_s2.jpg","isFeatured":false,"isNews":false,"college":false,"time":1450076653,"summary":""},{"id":80,"title":"HUDCO UNIT 2012-13","url":false,"isFeatured":false,"isNews":false,"college":false,"time":1450076349,"summary":"HUDCO UNIT 2012-13 got the first citation in 55th annual NASA convention 2012-13 for their design of 24*7 day and night permanent shelter for urban homeless.The entire work is taken by HUDCO,New delhi to work more on it.Also the entire work has been asked to sent by Dr.amod kumar from st.stefens hospital,tiss hazati, Delhi. and […]"},{"id":77,"title":"Egyptian Artwork","url":"http:\/\/quanta.net16.net\/wordpressnew\/wp-content\/uploads\/2015\/12\/XU0zTIXjslCgCGAULTlAVz3AEbLzNFdsB1OVFJH7zWYw222-h220.jpg","isFeatured":false,"isNews":false,"college":false,"time":1450075669,"summary":"Made By the students of all the batch 3102 etc,this is some artwork info.Made By the students of all the batch 3102 etc,this is some artwork infoMade By the students of all the batch 3102 etc,this is some artwork infoMade By the students of all the batch 3102 etc,this is some artwork infoMade By the […]"},{"id":67,"title":"Collezione – 2015","url":"http:\/\/quanta.net16.net\/wordpressnew\/wp-content\/uploads\/2015\/12\/event2015.jpg","isFeatured":false,"isNews":false,"college":false,"time":1450074883,"summary":"Collezione – 2015 the Annual Fashion Show of the School Of Fashion & Textile Design, The new age designers put a jaw dropping collections, for various category of Indian Ethnic, Resort, Cruize, Swimwear, Westernwear formal & men\u2019s wear."},{"id":63,"title":"International Tour: \u201cWorld is a book, those who do no travel read only one page\u201d \u2013 St. Agustine","url":"http:\/\/quanta.net16.net\/wordpressnew\/wp-content\/uploads\/2015\/12\/irfw_23.jpg","isFeatured":false,"isNews":false,"college":false,"time":1450071633,"summary":"True to ever word, students along with our experienced faculty get to have a great exposure to world of Fashion Art & Design. We host premium events with visits to Premier Vision, Art galleries, Meeting Designers and much more for an unmatched international exposure and witness latest in fashion, upcoming trend & So forth. Come […]"},{"id":53,"title":"yoloswag asdfasdfa","url":false,"isFeatured":false,"isNews":false,"college":false,"time":1449835439,"summary":"asdfasdf"},{"id":50,"title":"asdf","url":false,"isFeatured":false,"isNews":false,"college":false,"time":1449834299,"summary":"asdfasdfasdasdfasdfasdfsdfasd"},{"id":48,"title":"asdfasdf","url":false,"isFeatured":false,"isNews":false,"college":false,"time":1449834004,"summary":"asdfasdfasdfasdf"},{"id":45,"title":"asdfasdfasdfasdfad","url":false,"isFeatured":false,"isNews":false,"college":false,"time":1449833570,"summary":"adsfasdfasdfasdfasdfasdfasdf"},{"id":43,"title":"Story of my life","url":false,"isFeatured":false,"isNews":false,"college":false,"time":1449830857,"summary":""}]);
Which is not a valid JavaScript. A function call cannot start with: ?(). Instead, I would ask you to create a function that uses it, say:
function callJson (data) {
alert(data.length);
console.log(data.length);
}
Now, just give a request to:
http://quanta.net16.net/wordpressnew/test.php?jsoncallback=callJson
And that gives the output, callJson({json-data}).
Working Snippet
$(function () {
function callJson (data) {
alert(data.length);
console.log(data.length);
}
$.getJSON("https://jsonp.afeld.me/?url=http://quanta.net16.net/wordpressnew/test.php?jsoncallback=callJson", function (data) {
debugger;
}).fail(function(data) {
// console.log( data );
res = data.responseText.trim().replace("callJson(", "");
res = res.substr(0, res.length-2);
res = JSON.parse(res);
console.log(res);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Corrected the snippet. Check the console.
I had not set the Cross Origin Resorce Sharing header properly
When I pass everything in as just an array I get the desired result which is having my nested route display it's template inside the parent template. See codepen resume page
Now when I convert this to fixture data I get an error thrown:
Assertion failed: Error while loading route: TypeError: Object [object Object] has no method 'addArrayObserver'
It only breaks whenever I pass resume[1] as an argument. I'm confused why this works in my pen and I would like to know how to fix it when I use fixtures
afterModel: function(resume, transition) {
this.transitionTo('company', resume[1]);
}
Full Code
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.ApplicationAdapter = DS.FixtureAdapter.extend();
// Routes
App.Router.map(function() {
this.resource('resume', function(){
this.resource('company', {path: '/:company_id'});
});
this.route('contact');
});
App.ResumeRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('company');
}
,
afterModel: function(resume, transition) {
this.transitionTo('company', resume[1]);
}
});
App.Company = DS.Model.extend({
companyName: DS.attr(''),
jobTitle: DS.attr(''),
jobDescription: DS.attr(''),
image: DS.attr(''),
dates: DS.attr('')
});
// Model Data
App.Company.FIXTURES = [
{
id: '1',
companyName: 'Brandingbrand',
jobTitle: 'Frontend Web Developer',
jobDescription: 'Branding Brand powers mobile commerce sites and apps for over 200 of the worlds leading retailers, including American Eagle Outfitters, Crate & Barrel, Ralph Lauren, and Sephora. Our transformative technology is proven, reliable, and limitless. Our work is regularly noted by independent research firms, including Forrester and L2. We are also on CrunchBase. And Facebook. And Twitter. The Branding Brand platform scales to meet client goals and supports all forms of smartphone and tablet output. It requires no IT resources, no systems integration, and no web development. Because our inputs are as limitless as our outputs, we can easily transform any aspect of a desktop site into a unique, optimized experience for smartphones, tablets, or in-store. ',
image: 'http://b.vimeocdn.com/ps/103/913/1039135_300.jpg',
dates: 'November 2013 – Current | Pittsburgh Area'
},
{
id: '2',
companyName: 'PPG Industries',
jobTitle: 'Frontend Web Designer',
jobDescription: 'PPG, the worlds leading maker of transportation coatings and a major global supplier of industrial and packaging coatings, flat and fabricated glass, continuous-strand fiber glass, and industrial and specialty chemicals. Our many PPG technologies have been recognized with prestigious R&D 100 Awards and recipients have included. We are also the developers of Transitions® plastic photochromic eyewear lenses that automatically darken when exposed to sunlight. We developed a fiber glass yarn destined to revolutionize the manufacture of circuit boards for computers and other electronic devices Examples of our continuing emphasis on developing high-technology products include.',
image: 'https://www.xeikon.com/sites/default/files/images/ppg-industries.jpeg',
dates: 'August 2012 – August 2013 | Pittsburgh Area'
},
{
id: '3',
companyName: 'Kolano Design',
jobTitle: 'Graphic Designer',
jobDescription: 'Kolano Design is a visual marketing firm, based in Pittsburgh, with expertise in graphics, signage and interiors. The graphics team includes media and communications specialists who create strong corporate identities and adapt them to print, advertising, packaging and web. The signage team includes architects and industrial designers who develop signs that build brands and address complex wayfinding challenges. The interiors team includes designers and product inventors who give shape to high profile corporate and residential spaces and consumer products. We hope you enjoy paging through some of our recent work. Give us a call at 412-661-9000. Call us today.',
image: 'http://pghdesigners.com/images/portfolio/138.jpg',
dates: 'August 2012 – August 2013 | Pittsburgh Area'
},
{
id: '4',
companyName: 'Whirl Magazine',
jobTitle: 'Front End Web Designer',
jobDescription: 'Founded in 2001, WHIRL is Western Pennsylvanias Premier Lifestyle Magazine. Twelve times per year, WHIRL promotes the people, places, and businesses that help Pittsburgh continue to be "Americas Most Livable City." From fundraisers and galas to after-work happy hours, WHIRL provides a behind-the-scenes look at Pittsburghs vibrant social scene. The success of the magazine is founded on the support of the community and WHIRLs goal to showcase the best of Western Pennsylvania living. Since its foundation, WHIRL Magazine has expanded into a multi-faceted publishing company, including the bi-monthly Edible Allegheny, Pittsburghs main resource for local food and farms.',
image: 'http://www.themodernmatchmaker.com/wp-content/uploads/2012/08/whirl-magazine-dating-news-articles.jpg',
dates: 'April 2011 – July 2011 | Pittsburgh Area'
},
{
id: '5',
companyName: 'Pittsburgh Technical Institute',
jobTitle: 'Visual Communications Assistant',
jobDescription: 'Probably the most important advantage for students is the assistance provided by the Career Services department in job search and career assistance. Students can explore employment opportunities on a local, regional and national level through PTI’s network of contacts. All associate degree and many certificate students have the opportunity to experience an industry internship or clinical experience. This further enhances the hands-on experience students enjoy across all programs and builds a strong portfolio. Probably the most important advantage for students is the assistance provided by the Career Services department. This is all without doubt why people come.',
image: 'http://media.prleap.com/image/17002/full/PTI.png',
dates: 'March 2010 – July 2011 | Oakdale PA'
}
];
When I console.log('company', resume1); — company is undefined. When I console.log('resume', resume); and console.log('company', resume); they both return respectively:
resume
Class {type: function, store: Class, isLoaded: true, isUpdating: false, constructor: function…}
__ember1388681292354: "ember270"
__ember1388681292354_meta: Meta
_super: undefined
arrangedContent: (...)
content: (...)
get content: function () {
set content: function (value) {
isLoaded: true
isUpdating: false
store: Class
toString: function () { return ret; }
type: App.Company
__proto__: Object
resume isn't an array, it's a collection, so resume[0] doesn't exist, you should use resume.objectAt(0)