You have answered your own question,
document.getElementById('employeelist').innerHTML = statusHTML;
No different than regular php.
But
xhr.open('GET', 'employees.json');
doesn't work.
I made a route like this:
Route::get('/', 'HomeController@employees');
then in my views directory I made:
employees.json
then in my homeController:
public function employees()
{
return view('employees.json');
}
I had a feeling my employees function wouldn't work because of how its view is using dot syntax.
shouldI have made a regular blade and put the json array in it?
I want to parse it so it comes out correctly
stringify your json, send it to controller and use json_decode $_POST['yourjsondata'] like
$mydata = json_decode($_POST['yourjsondata'])); //or use laravel request
now send $mydata to view and foreach over the results. Use table, ul, or whatever.
Sorry if I don't understand exactly what you are trying to do with the data.
Also consider using jquery ajax, it is easier to work with.
I'm following a tutorial, that has a employees.json file like this:
[
{
"name": "Amit",
"inoffice": false
},
{
"name": "Andrew",
"inoffice": true
},
{
"name": "Ben",
"inoffice": true
},
{
"name": "Dan",
"inoffice": true
},
{
"name": "Dave",
"inoffice": true
},
{
"name": "Guil",
"inoffice": false
},
{
"name": "Hampton",
"inoffice": true
},
{
"name": "Jason",
"inoffice": true
},
{
"name": "Jim",
"inoffice": true
},
{
"name": "Kenneth",
"inoffice": false
},
{
"name": "Pasan",
"inoffice": true
},
{
"name": "Zac",
"inoffice": false
}
]
he then uses this JavaScript:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.onreadystatechange === 4) {
// helps to extract the values from our responseText
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for (var i=0; i < employees.length; i++){
if (employees[i].inoffice === true){
statusHTML += '<li class="inoffice">';
} else {
statusHTML += '<li class="out">';
}
statusHTML += employees[i].name;
statusHTML += '</li>';
}
statusHTML += '</ul>';
// this injects the json into the html
document.getElementById('employeelist').innerHTML = statusHTML;
}
};
xhr.open('GET', '');
xhr.send();
Notice the xhr.open(). The first parameter is 'GET', the second is blank. Its supposed to be a url. His second parameter is employees.json but since i'm using laravel 5 I cant use that. What should be my second parameter? Do I create
in routes:
Route::get('employeeslist', 'HomeController@employees');
in HomeController:
public function employess()
{
return view('employees);
}
and just create a blade with json inside:
[
{
"name": "Amit",
"inoffice": false
},
{
"name": "Andrew",
"inoffice": true
},
{
"name": "Ben",
"inoffice": true
},
{
"name": "Dan",
"inoffice": true
},
{
"name": "Dave",
"inoffice": true
},
{
"name": "Guil",
"inoffice": false
},
{
"name": "Hampton",
"inoffice": true
},
{
"name": "Jason",
"inoffice": true
},
{
"name": "Jim",
"inoffice": true
},
{
"name": "Kenneth",
"inoffice": false
},
{
"name": "Pasan",
"inoffice": true
},
{
"name": "Zac",
"inoffice": false
}
]
and just name the blade
employees.blade.php
Is this a laravel tutorial? Also I suggest doing some jquery tutorials, and watching some videos on jquery, some good ones are by jream on youtube.
Have you tryed to use this script directly in a view just to test it?. You have to have your placeholder, probably a div for that innerHTML.
instead of you trying to make my program work, tell me how you would do it. it's a tree house tutorial.
idesignedme said:
instead of you trying to make my program work, tell me how you would do it. it's a tree house tutorial.
Forget about that tree house tutorial. and watch those videos I referred you to.
But that aside, this line of code will do the displaying in the view:
document.getElementById('employeelist').innerHTML = statusHTML;
You have to have a div with an id of employeelist.
Practice this in a regular one page php file first. Once you understand that, it will be the same in a laravel view.
See this http://www.w3schools.com/ajax/ajax_php.asp
so should the how do i refer to the employees.json, file its not the same I've done a single page. It's different becuae you can't call employees.json like you do other pages in laravel 5. Okay, where in my directory is it getting this data is probably the better question. in an employees.json file? and How do I use the employees.json file in L5
You don't this goes directly into that div. Put that script on that view page, load that page from a controller like you would any page. Have a button on page that calls your JavaScript routine, the div will be filled with that information. Exactly like a single page application.
xhr.open('GET', '');
Try putting it in the view folder or controller folder just to see if that works and using second parameter as that file.
Just to test. You may have to make a route to this file and call it via an echo statement. Also see ==http://laravel.io/forum/04-29-2015-people-asking-about-jquery-....
You should really be learning how to retrieve this stuff from a database not a file.
Hey, try actually sticking that json data in a controller method just for testing. It has to work somewhere.
I did @jimgwhit and much to my chagrin it did not work. with laravel you name your routes whatever you want i.e. Route::get('/', 'HomeController@index'); the first parameter is how you want your url to look the second is where that actually maps to.
you can't return an json file from the controller like this function() { return view(employee.json) }
that won't work. what Im asking you is how would you do it. I understand the innerHTML part of it. but how do I access the employees.json file. what actually grabs it so it can be displayed in the innerHTML.
and how would I pull it from a database? is this covered in the Laracasts by Mr. Way?
I would not use that file I would learn to retrieve the data from a database like I told you. And I would forget that tutorial and watch those videos on YouTube. Did you look at http://laravel.io/forum/04-29-2015-people-asking-about-jquery-.... There I fill three fields using jquery ajax. At least have a look. Your question is similar, but I do not use a data file I use the database.
I just want to follow along and be able to do everything he is doing so I could reproduce it. So I could be better at Laravel. and its really the same thing its just locally.
If I understand your question correctly, you are probably missing this
Response::json()
Laravel
<?php
Route::get('employees.json', function () {
return Response::json(array(
'foo' => array('foo1', 'foo2'),
'bar' => array('bar1', 'bar2',
));
});
JavaScript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.onreadystatechange === 4) {
// helps to extract the values from our responseText
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for (var i=0; i < employees.length; i++){
if (employees[i].inoffice === true){
statusHTML += '<li class="inoffice">';
} else {
statusHTML += '<li class="out">';
}
statusHTML += employees[i].name;
statusHTML += '</li>';
}
statusHTML += '</ul>';
// this injects the json into the html
document.getElementById('employeelist').innerHTML = statusHTML;
}
};
xhr.open('GET', 'employees.json');
xhr.send();
If you already have a json file in your file system, you could do something like this, and then after that you make Laravel return Response in JSON format. But that's not really the case isn't it? since you can just put it in your public folder and access it. lol
$data = file_get_contents('/path/to/your/data.json');
$json = json_decode($data, true);
return Response::json($json);
idesignedme said:
I just want to follow along and be able to do everything he is doing so I could reproduce it. So I could be better at Laravel. and its really the same thing its just locally.
Why doesn't he show how to do it in laravel. And you still need a view with a div named employeelist.
I have never written a raw XMLHttpRequest in my life, and I've been writing JavaScript since Netscape 4 was the browser de jour (and I'm not starting now).
Do yourself a favour and just use jQuery's AJAX methods, like get(), post() and ajax(). They're fully cross-browser, and make working with REST calls a snap; what's more the JSON (string) is passed to your handler function as an actual Object.
If you want to see this data in a form that's actually useful, do a console.log(employees) from within your handler function and you'll see it output as a tree-like structure you can actually inspect.
F12 brings up the developer console if you didn't already know that.
Obviously you're a beginner, but this is the kind of code you should be aiming to write:
$.get('/path/to/endpoint', function(data, status, xhr)
{
// variables
var $ul, $li;
// create list
$ul = $('<ul>');
// loop over data
$(data).each(function(i, e)
{
// create item
$li = $('<li>')
.addClass(e.inoffice ? 'inoffice' : 'out')
.text(e.name);
// add item to list
$ul.append($li);
});
// add list to page
$('#employeelist').append($ul);
});
Sign in to participate in this thread!
Laravel
Laravel News
Laracasts
Laravel Podcast