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.
Related
Trying to update the values in a map in javascript. Below is how my map looks like.
Data in Map :[{…}]
[{
accId: "001",
lineOfBusiness: "Protection",
name: "Ins",
plannedValue: 1200.18,
SellOutValue: 4115.85,
productGroup: "INS",
sesnId: "a2s",
subGroups: [{
accountId: "001",
brandName: "INS",
isLocked: true,
lineOfBusiness: "Ction",
name: "Ins",
portfolioId: "a34",
productGroup: "IDES",
recordId: "006",
seasonId: "a2s",
territoryId: "0MI",
unitOfMeasurement: "MXN"
}]
}]
Here i am trying to update the map values plannedValue and SellOutValue with the updated values in a new map. when i am executing the below code i am getting the error
set is not a function.
//Cloning the map and formatting the values
let map1 = {};
for(var i in incoming){
map1[i] = incoming[i]
map1[i].set('plannedValue',map1[i].plannedValue.toLocaleString())
map1[i].set('SellOutValue',map1[i].SellOutValue.toLocaleString())
}
console.log(map1);
can someone please help me on this
map[i] is an object (an element of the incoming Map), not a Map. So use ordinary property access.
map[i].plannedValue = map1[i].plannedValue.toLocaleString();
map[i]. SellOutValue = map1[i].SellOutValue.toLocaleString();
Note that you're not making clones of the objects in the Map, so this will modify the original objects as well.
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???
I have a dropdown that has a list of countries where a client operates.
I also have a JSON file with the following (dummy info, obviously):
[
{
title: "Malaysia",
lineOne: "Address one",
lineTwo: "Address two,",
lineThree: "Address three,",
lineFour: "Address four,",
postCode: "AA1 1AA",
email: "email#address.com",
tel: "+44 1234 567 890",
mob: "",
name: "Name McName",
lat: 00.000000,
lng: -00.000000
},
{
title: "USA",
lineOne: "Address one",
lineTwo: "Address two,",
lineThree: "Address three,",
lineFour: "Address four,",
postCode: "AA1 1AA",
email: "email#address.com",
tel: "+44 1234 567 890",
mob: "",
name: "Name McName",
lat: 00.000000,
lng: -00.000000
},
]
So the issue that I'm facing is that when someone selects a country, JS iterates through the JSON file and generates a contact info block in the front end for every item where the 'title' matches the country in the data-country tag in the option for that country.
I'm relatively new to working with JSON and all the tutorials I've found are close, but not quite what I need. Is anyone able to give me a bit of guidance where to look or help me directly?
p.s. that there is also an SVG map where the available countries have a custom class that will have to update with the country selected in the dropdown and vice versa but I thought it would be easier to get one working first then worry about the map once the dropdown is working
Sorry if this isn't very clear, but as mentioned, I'm pretty fresh to this sort of JS.
Thanks,
Jay
I have to deal with a huge json like this acting as live datasource, is loaded every 5 min from a url..
sports: [
{
id: 200,
title: "Horse Racing",
meetings: [ ],
is_virtual: false,
events: [...],
pos: 83
},
{
id: 600,
title: "Tennis",
meetings: [ ],
is_virtual: false,
events: [
{
id: 301804310,
is_virtual: false,
outcomes: [
{
id: 32779738900,
description: "Brown/Pliskova",
},
{
id: 32779738900,
description: "Brown/Pliskova",
}]
}]
}]
And need to write methods like
getAllSports() returning an array object with all sports
getSport(sport_id) returning the object with this sport id
getAllEvents(Sport) returning all events list object of this sprot
getEvent(Sport, event_id) returning events that matches with given event_id
getOutcomes(Event, outcomes) ... and so on
Is there is a library that parses the json and already have methods some methods to help me to do this kind of stuff? example: obj.find(sport_id)...
In JS you have LowDB https://github.com/typicode/lowdb for this, any similar in Ruby/Sinatra? Or any approach suggestion? Im not using Rails.
Thanks in advice
You could always use Ruby's built in JSON library. You would be able to do something like
json_string = '{"name": "my name", "age": 5}'
object = JSON.parse(json_string)
object["name"] => "my name"
You can then use regular ruby hash / array functions on the returned object. In your case, you could do something along the lines of
def getSport(json_object, id)
json_object["sports"].select { | h | h["id"] == id }.first
end
Which, assuming you have already parsed the JSON and passed the resulting value into that function, would return the sport that had the given ID.
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).