Develop Reference

Pass data from Laravel $collection to jquery loop

Hi everyone this is a Laravel issue. I'm working on a directory site. I am trying to solve a problem like this: I need to populate an open street map with markers that are handled as javascript variables like this:
var mapMarkers = [
{
title: "Paolo",
address: "Troy South End, 264 E. Berkley St, Boston",
lat: 42.3432809,
lng: -71.06297789999996,
img: "assets/images/listings/1.jpg",
category: "Restaurants",
icon: "icon-dinner",
featText: "~ $18-$90",
rating: "4.9",
link: "#"
},
{
title: "Paolo",
address: "5347 N Clark St, Chicago, IL",
lat: 41.9794495,
lng: -87.6679747,
img: "assets/images/listings/2.jpg",
category: "Restaurants",
icon: "icon-dinner",
featText: "Best fried chicken of the town",
rating: "4.2",
link: "#"
},
{
title: "Paolo",
address: "171 E Broadway, New York, NY",
lat: 40.7138292,
lng: -73.98966669999999,
img: "assets/images/listings/5.jpg",
category: "Restaurants",
icon: "icon-dinner",
featText: "Promotional Lunch $45",
rating: "4.1",
link: "#"
}
];
The problem is that I have this data inside a Laravel collection and I'm looking for the best way to passing them to the javascript:
var mapMarkers = [
{
title: $companies->name,
address: $companies->address,
............
},
Can someone help to understand the best practice to solve this issue?

Similarly to Eloquent objects, collections can be serialized to JSON (Javascript objects) by calling the toJson() method. So, $companies->toJson() should give you what you need.
In a Blade template, you can "print" out the companies' json format like this:
<script>
var mapMarkers = {!! $companies->toJson() !!};
</script>
So, now when you use mapMarkers in your javascript code, it's like using the $companies collection in PHP.
It also looks like your fields don't match up (title: $companies->name in your example). To make the returned json include title instead of name, you can map over all of the companies, and set the title field to the company name. With that, the above example would look like this:
<script>
var mapMarkers = {!! $companies->map(function ($company) { $company->title = $company->name; return $company; })->toJson() !!};
</script>
Mapping over a collection creates a new collection with the value returned from the map callback function.
You can look at these methods in the Laravel docs: toJson() and map().

Using ajax, you can accomplish this because normally, Collections and arrays and automatically returned as JSON by Laravel, also collection has ->toJson() method which you can use to return the response, thenJSON.parse(the_response) to give you a javascript object.

Creating Classroom using App Script

I'm trying to create Google classrooms from a spreadsheet using App Script. I can create the classes successfully, but it's not adding the course materials (1 Doc) to the about page.
This is the code I am using and I've tried using the API reference to no avail.
Can someone please advise me on how to correctly format the courseMaterialSets to include a Google Doc from my drive.
var create = Classroom.Courses.create({
"ownerId": '-My email address-',
"name": getData[i][0],
"section": getData[i][1],
"descriptionHeading": getData[i][2],
"description": getData[i][2],
"courseMaterialSets" : [{
"title" : 'Course Outline',
"materials" : [{
"driveFile" : {
"id" : getData[i][5],
"title" : 'Course Outline' ,
"alternateLink": getData[i][4],
"thumbnailUrl" : 'https://drive.google.com/uc?export=download&id=-Image ID-',
},
}
]
}
]
})
}
Logger.log(create)
}
Thank you.
EDIT
I've updated the code to reflect the suggestions in the comments and logged the value of var create which returns all of the info of the newly created Classroom but with no mention of the course material set.

According to the documentation you have to specify the DriveFile object with JSON.
"driveFile" : {
"id": theDocIdString,
"title": theDocTitleString,
"alternateLink": urlToFileString,
"thumbnailUrl": imgThumbnailString
}
You can of course pull all of this data from a sheet or use variables to loop through resources.

Here is the code I tried to successfully create a course, but I also do not get the course materials to attach to the ABOUT tab of the Google Classroom created.
function createCourse() {
var resource = {
name: "XYZ course",
room: "The Great Hall",
ownerId: "me",
courseMaterialSets: [{
title: "course materials",
materials: [
{
driveFile: {
id: "insert id of google drive file"
}
}
],
}],
}
var newCourse = Classroom.Courses.create(resource);
}
I also tried creating the course and then accepting the course in Google Classroom and the trying to add the classroom set. This also was not successful.
function addClassSet() {
var id = "course id obtained with sample script in documentation";
var resource = {
name: "XYZ course",
room: "The Great Hall",
courseMaterialSets: [{
title: "course materials",
materials: [
{
driveFile: {
id: "drive file id" //drive file was not added
}
}
],
}],
description: "This is a trial course", //this worked
}
Classroom.Courses.update(resource, id);
}
Is it because the documentation states that the courseMaterialsSets is Read only???

best practice data design in firebase

How could i structure data for following scenario?
There is an app called Food Ordering System. It contains
Username(Who is registering this restaurant menus for online order)
Restaurant_name
Description
Location
Estimated Delivery
Menu(Has multiple menus for one restaurant)
My design
"restaurant":{
"username":{
"restaurant_name":"KFC Restaurant",
"description":"short description on restaurant",
"estimated delivery":"1hour/km",
"distance":"20km away",
"location":"Kathmandu",
"rating":"rating star up to 5",
"menus":{
"menu":{
"item":"buff momo",
"price":"$5",
"rating":"rating star up to 5"
},
"menu":{
"item":"Fried Chicken",
"price":"$10",
"rating":"rating star up to 5"
},
"menu":{
"item":"BBQ",
"price":"$20",
"rating":"rating star up to 5"
}
}
}
}
Is my design the best practice design?

It actually depends on what you want to do with this data.
If in your website you want to show a list of all restaurant and when you click on restaurant show the list of menu they are offering, storing the menu inside the restaurant might not be a good idea.
Because according to the doc :
When we read a data node in our Firebase database, we also retrieve all of its children!
(the old one) https://www.firebase.com/docs/rest/guide/structuring-data.html#section-denormalizing-data
Also, imagine if you want to do a search bar and look for a menu (like chicken nuggets) and return the list of restaurant offering this I would design your database this way:
"restaurant":{
"$username":{
"restaurant_name":"KFC Restaurant",
"description":"short description on restaurant",
"estimated delivery":"1hour/km",
"distance":"20km away",
"location":"Kathmandu",
"rating":"rating star up to 5",
...
}
}
"menus":{
"$username" : {
"menu":{
"item":"buff momo",
"price":"$5",
"rating":"rating star up to 5"
},
"menu":{
"item":"Fried Chicken",
"price":"$10",
"rating":"rating star up to 5"
},
"menu":{
"item":"BBQ",
"price":"$20",
"rating":"rating star up to 5"
}
}
}

Adding JSON object-related link to Dynatable rows

I am trying out Dynatables and, so far, I am able to display my data correctly and update its contents when a certain event happens. So far, this is what I have: http://jsfiddle.net/pDVvx/28/
$(document).ready( function() {
var allSales = [{
locationId: 1001,
location: "Store A",
item: "Soap",
quantity: 2,
amount: 99.50
},{
locationId: 1002,
location: "Store B",
item: "Tissue",
quantity: 1,
amount: 49.75
}];
var allSales2 = [{
locationId: 2001,
location: "Store C",
item: "Bag",
quantity: 1,
amount: 10000.00
},{
locationId: 2002,
location: "Store D",
item: "Shoe",
quantity: 2,
amount: 5999.50
}];
var locationDetails = [{
locationId: 1001,
location: "Store A",
address: "some address here",
manager: "Pepito Manaloto"
},{
....
}];
var updateDynaTable = function(argument){
console.log("argument for updateDynaTable");
console.log(argument);
dynatable.settings.dataset.originalRecords = argument;
dynatable.process();
}
var dynatable = $('#my-final-table').dynatable({
dataset: {
records: allSales
}
}).data('dynatable');
$("#button1").click(function(){
updateDynaTable(allSales);
})
$("#button2").click(function(){
updateDynaTable(allSales2);
})
});
Furthermore, I want to make each location (Store A, Store B, etc.) a clickable link with the respective locationID associated with it. I need this so that whenever I click a store link, the corresponding store details (as shown in locationDetails table) will be prompted.
For example, if sales1 button is clicked and Store A is also clicked, a prompt (could be an alert) will show the store's address and manager (from locationDetails table).
If anyone can suggest any solution, that would be very helpful. Thank you!

I've been looking at this for the past 20 minutes or so and I'm coming to the conclusion that this is not going to be easy if you build your dynatable from JSON. I think that the countries example at the top of the dynatable site is probably built as a regular html table on the server side and then dynatable is just being used for sorting/pagination/etc.
Seems like the other likely option would be to return, in your JSON, the full content of the cells you want to create, including any links, etc (or postprocess the JSON in javascript to mangle it into the form you want).

ng grid: Is there a way to render two rows per record? (or HTML after row?)

I am using ng-grid, and I would like to have a second row that can be optionally displayed within an ng-grid, that contains a smaller grid/list of values pertaining to that row.
Here is a rough plunkr mockup of what I am going for:
http://plnkr.co/edit/6Wgpk7jxJLDY7wv023Ne?p=preview
Is there any way to accomplish this with ng-grid?

Sounds like you are just looking after the Master Detail: http://angular-ui.github.io/ng-grid/#/masterdetail
Note that you don't need to show all your columns in the master grid.
So if your data looks like this:
[
{name: "John Doe", street: "123 Main St.", phone: "(555)555-0199", purchases: [] },
{name: "Jane Doe", street: "123 Main St.", phone: "(555)555-0198", purchases: [{item: "hat", price: "12"}, {item: "yellow shoes", price: "125"}]}
];
You can only show the first three in your grid:
$scope.colDefs = [
{field : "name"},
{field : "street"},
{field : "phone"}
];
and show the additional columns as soon as you have selected a row by adding this to the gridoptions
selectedItems: $scope.mySelections
Finally, to display the additional columns you can for instance use the ng-repeat directive
<div class="footer" ng-repeat="item in mySelections">
<span class=header>Item</span>
<span class=header>Price</span>
<p ng-repeat="purchase in item.purchases">
<span>{{purchase.item}}</span>
<span>{{purchase.price}}</span>
</p>
</div>
I've worked it out in this plunker: http://plnkr.co/iGz1RjOILjP2VZxEt1ny