I've used json_builder to generate the JSON file needed for the timeline from timeline.verite.co as it needs to be in a specific format. However, when I load the page, it gets stuck with a white background and a loading gif. It works if I give it a link to some sample data, but not the generated data for the user. The html page (users/1/events) works fine. Anyone have any idea why? I've run out of ideas now!!
UPDATE:
I got the JS to link to a static file with the pasted contents of the JSON from users/1/events.json, and it works fine. So I'm assuming the problem is that the page is blank when the JS tries to fetch it, and only get populated when you actually go to that URL. How do I get around this?
Generated JSON file (got by going to /users/1/events.json):
{
"timeline": {
"headline": "Emily",
"type": "default",
"text": "A Timeline",
"startDate": "1922,10,30",
"date": [
{
"startDate": "2012,11,17",
"endDate": "2012,11,17",
"headline": "My Birthday",
"text": "This is my birthday",
"asset": {
"media": "http://www.youtube.com/watch?v=dePMU8R131s",
"credit": "",
"caption": "Happy Birthday"
}
}
]
}
}
Required syntax:
{
"timeline":
{
"headline":"Stuff People Say",
"type":"default",
"text":"People say stuff",
"startDate":"2012,1,26",
"date": [
{
"startDate":"2012,1,26",
"endDate":"2012,1,27",
"headline":"Stuff Politicians Say",
"text":"<p>In true political fashion, his character rattles off common jargon heard from people running for office.</p>",
"asset":
{
"media":"http://youtu.be/u4XpeU9erbg",
"credit":"",
"caption":""
}
},
{
"startDate":"2012,1,10",
"headline":"Stuff Nobody Says",
"text":"<p>Have you ever heard someone say “can I burn a copy of your Nickelback CD?” or “my Bazooka gum still has flavor!” Nobody says that.</p>",
"asset":
{
"media":"http://youtu.be/f-x8t0JOnVw",
"credit":"",
"caption":""
}
}
]
}
}
controller (relevant bits):
class EventsController < ApplicationController
respond_to :json, :html
def myevents
#events = current_user.events
respond_with #users
end
end
routes:
resources :events do
member do
get 'myevents'
end
end
match 'users/:id/events' => 'events#myevents'
JS to call timeline:
<%= javascript_include_tag "/js/storyjs-embed.js" %>
<script>
$(document).ready(function() {
createStoryJS({
type: 'timeline',
width: '800',
height: '600',
source: '/users/<%= current_user.id %>/events.json',
embed_id: 'my-timeline'
});
});
</script>
I found the answer in the end, the js for the form wasn't reading the JSON file properly. I needed to add a callback.
Related
I am working on rails 6 with ruby-2.6.5 and i am working on the API. I am using nested attributes for my order as follows:-
orders_controller.rb
# frozen_string_literal: true
module Api
module V1
class OrdersController < Api::V1::ApiApplicationController
before_action :validate_token
def create
debugger
order = OrderInteractor.create(order_params, #user_id)
if order.save
render json: { 'message' => 'Order Placed' }, status: :ok
else
render_errors(order)
end
end
private
def order_params
params.require(:data)
.require(:attributes)
.require(:order)
.permit(:user_id, :address_id, :total_price, :payment_status,
:order_number, :delivery_time_slot,
order_details_attributes:
%i[price quantity order_detail_status product_id
order_number variant_id],
payment_details_attributes:
%i[payment_data payment_id])
end
end
end
end
Api Request:-
{
"data": {
"attributes": {
"order": {
"address_id": "82",
"delivery_time_slot": "5:00 PM - 8:00 PM(Today)",
"order_details_attributes": [{
"price": "76.0",
"product_id": "46",
"quantity": "4",
"variant_id": "47"
}, {
"price": "9.9",
"product_id": "30",
"quantity": "1",
"variant_id": "29"
}],
"payment_details_attributes": [{
"payment_data": {
"data": {
"nameValuePairs": {
"razorpay_payment_id": "pay_HiHceX2p6450Wa",
"org_logo": "",
"org_name": "Razorpay Software Private Ltd",
"checkout_logo": "https://cdn.razorpay.com/logo.png",
"custom_branding": false
}
},
"paymentId": "pay_HiHceX2p6450Wa",
"userContact": "+916494949494",
"userEmail": "dailyferia#gmail.com"
}
}],
"total_price": "354"
}
},
"type": "orders"
}
}
While placing order i am getting the error Unpermitted parameter: :payment_data but it's working fine for the order_details. Please help me to fix it? I also tried the below ways to fix it but nothing worked:-
payment_details_attributes: %i[:payment_data payment_id]) and `payment_details_attributes: ['payment_data', 'payment_id'])`
Your payment_data is a complex object, rather than the scalars that are found in your order_details_attributes
You will need to add more to the permitted parameters, I believe the simplest solution would be:
payment_details_attributes: [payment_data: {}]
This should accept all parameters under payment_details_attributes, but it would also permit any other keys as well. You may want to be more strict and only allow the parameters specified above, in which case you could do:
payment_details_attributes: [
payment_data: {
data: {
nameValuePairs:
%i[razorpay_payment_id org_logo org_name checkout_logo custom_branding]
},
:paymentId, :userContact, :userEmail
}
]
which should restrict the parameters to just the format used in your example.
A few other notes:
You have %i[payment_data payment_id] in your original sample, but there is no payment_id in your payload. The attribute in the sample is paymentId, and on top of that, it is an attribute of the payment_data, not the payment_details_attributes
you wouldn't use %i and a colon, the %i is a shorthand for creating an array of ruby symbols, so %i[:payment_data payment_id] would create the array [:":payment_data", :payment_id] (note the extra colon at the beginning of payment_data)
Lastly, I haven't tested my code above, so there could be a syntax or other error, but hopefully this points you in the right direction.
I'm developing an angular app using a rails backend. I'm having problems formatting the parameters hash so rails can use it. The data is a many to many relationship, and the form contains nested attributes. In Rails, my models utilize the accepts_nested_attributes_for helper. I know exactly what format rails expects, but when I make a POST request, there is one minor detail that's off. I'm going to list below two param hashes. One is what Angular produces, and the other is what Rails expects.
What's off about the Angular request is rails expects a deeper layer of nesting in the expense_expense_categories attributes. I've never understood why rails requires it. What angular produces looks logical to me. My question is.. What do I need to do to format the parameters in Angular? Looking at what I have so far, am I doing this in a way that satisfies Angular best practices?
Angular:
{
"expense": {
"date": "2017/4/13",
"check_number": "132",
"debit": "0",
"notes": "har",
"amount": "24",
"payee_id": "334"
},
"expense_expense_categories_attributes": [{
"expense_category_id": "59",
"amount": 12
},
{
"expense_category_id": "62",
"amount": 11
}
]
}
What Rails expects:
{
"expense": {
"date": "2017/12/12",
"check_number": "122",
"debit": "0",
"notes": "har",
"amount": "24",
"payee_id": "334",
"expense_expense_categories_attributes": {
"210212312": {
"expense_category_id": "72",
"amount": "12"
},
"432323432": {
"expense_category_id": "73",
"amount": "12"
}
}
}
}
My code in angular is as follows.
onSubmit() method in component:
onSubmit() {
this.expenseService.addExpense(this.expenseForm.value)
.subscribe(
() => {
this.errorMessage = '';
},
error => {
this.errorMessage = <any>error;
}
);
this.expenseForm.reset();
}
addExpense in my service file:
addExpense(expense: Expense): Observable<any> {
let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers});
return this.http.post('http://localhost:3000/expenses', expense, options)
.map(
(res: Response) => {
const expenseNew: Expense = res.json();
this.expenses.push(expenseNew);
this.expensesChanged.next(this.expenses.slice());
})
.catch(this.handleError);
}
my main form:
private initForm() {
let expense_expense_categories_attributes = new FormArray([]);
this.expenseForm = this.fb.group({
id: '',
date: '',
amount: '',
check_number: '',
debit: '',
payee_id: '',
notes: '',
expense_expense_categories_attributes: expense_expense_categories_attributes
});
}
My FormArray for nested attributes:
onAddExpenseCategories() {
(<FormArray>this.expenseForm.get('expense_expense_categories_attributes')).push(
new FormGroup({
'expense_category_id': new FormControl(null, Validators.required),
'amount': new FormControl(null, [
Validators.required
])
})
);
}
UPDATE: I was able to get it working, but I had to use a god awful regex to manipulate the request to what I wanted. It was an extremely ugly option so I still need to find a better option. Is there a better way to format JSON Objects and replace the contents? I'm not sure the correct way to do it. Need help.
You need to add the expense_expense_categories to the wrap_parameters like this:
wrap_parameters :expense, include: [:expense_expense_categories_attributes]
Additional attributes must be explicitly added to wrap_parameters as it only wraps attributes of the model itself by default.
I am working on an rails application to manage and present images to friends and family.
In that application you can have
Events -> Subevents -> EventImages
routes.rb
resources :events do
resources :subevents do
resources :event_images
end
end
The angularjs part/page is starting when a user selects an specific event.
On the event edit page i want to present the subevents and images like that:
Subevent1 -> Upload Images Button
Image1 Image2 Image3 ...
Subevent2 -> Upload Images Button
Image1 Image2 Image3 ...
...
New Subevent Button
So basically i want to present all available subevents and the images inside each subevent on one page (there could be several subevents and several 100 images). The user should be able to add new subevents and to upload or delete images to each subevent and moving images between subevents via drag/drop. But adding/deleting/uploading/mowing is not my problem right now i just mentioned it because it might influence the solution to my problem.
Im using a nested ng-repeat to display all the information on the page
<div class="subevent" ng-repeat="subevent in event.subevents">
<li class="img" ng-repeat="image in subevent.event_images">
</li>
</div>
Im new to the angular world and im having problems now on how to retrieve the data i need for the page mentioned above.
I came up with two ideas so far:
Retrieve all the informations via an api controller in an nested form:
show.json.jbuilder
json.id #event.id
json.subevents #event.subevents do |subevent|
json.id subevent.id
json.name subevent.name
json.event_images subevent.event_images do |event_image|
json.id event_image.id
json.thumb event_image.image({ resize: "150x150" }).url
end
end
Which will give me this:
{
"id": "54d75dd9686f6c2594020000",
"subevents": [
{
"id": "54d75de1686f6c2594030000",
"name": "Test",
"event_images": [
{
"id": "54df3904686f6c41cf0c0000",
"thumb": "/uploads/event_image/54df3904686f6c41cf0c0000/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
},
{
"id": "54df56c5686f6c41cf850100",
"thumb": "/uploads/event_image/54df56c5686f6c41cf850100/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
}
]
}
]
}
And im using restangular to retrieve this information
$scope.event = Restangular.one('api/events','<%= #event.id %>').get().$object;
But this solution doesnt feel right to me. When i start to manipulate the page (uploading new images/deleting images/moving images from one subevent to another) i see myself refreshing the complete page because i see no other way here on how to just delete one image for example without reloading the complete $scope.event to get the updated page.
The other solution which came to my mind but i did not get working so far was to use the nested features of restangular to retrieve all the needed information for my page without having to create a seperate api controller.
$scope.event = Restangular.one("events",'<%= #event.id %>').all("subevents").all("event_images");
I could not find a working solution which would let me iterate over the $scope.event with ng-repeat like i did above and im not sure if this would solve my overall problem.
So the questions i would like to have answered are:
Should i stick to the API controller appreaoch or is there a way to make my second idea working to get rid of the api controller ?
How do i manipulate the images/subevents without having to reload everything ? ( an example of deleting an image on the page would be great )
This answer your second question using your current API
Plunker
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.event = {
"id": "54d75dd9686f6c2594020000",
"subevents": [
{
"id": "54d75de1686f6c2594030000",
"name": "Test",
"event_images": [
{
"id": "54df3904686f6c41cf0c0000",
"thumb": "/uploads/event_image/54df3904686f6c41cf0c0000/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
},
{
"id": "54df56c5686f6c41cf850100",
"thumb": "/uploads/event_image/54df56c5686f6c41cf850100/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
}
]
}
]
};
});
app.directive('myEvent', function(){
return {
scope: { myEvent: '=' },
template: "<div>{{myEvent.id}}<div my-subevent='subevent' ng-repeat='subevent in myEvent.subevents'></div></div>",
controller: function($scope){
this.removeSubevent = function(e){
$scope.myEvent.subevents.splice($scope.myEvent.subevents.indexOf(e), 1);
};
}
};
});
app.directive('mySubevent', function(){
return {
scope: {mySubevent: '='},
template: "<div>{{ mySubevent.name }} <a href='' ng-click='remove()'>remove subevent</a><div my-subevent-img='img' ng-repeat='img in mySubevent.event_images'></div></div>",
require: '^myEvent',
link: function(scope, ele, attrs, myEventCtrl){
scope.remove = function(){
myEventCtrl.removeSubevent(scope.subevent);
};
},
controller: function($scope){
this.removeImg = function(img){
$scope.mySubevent.event_images.splice($scope.mySubevent.event_images.indexOf(img), 1);
};
}
};
});
app.directive('mySubeventImg', function(){
return {
scope: { mySubeventImg: '=' },
template: "<div><img ng-src='mySubeventImg.thumb'><a href ng-click='remove()'>remove img</a></div>",
require: '^mySubevent',
link: function(scope, ele, attrs, mySubeventCtrl){
scope.remove = function(){
mySubeventCtrl.removeImg(scope.mySubeventImg);
};
}
};
});
index.html
<div my-event="event"></div>
I have a weird issue with CarrierWave that I can't find anywhere else.
I'm using Jbuilder to generate the JSON for my API. I have a photos table and a url field on the table.
Without mount_uploader :url PhotoUploader on the photos model, my JSON looks like this:
"photos": [
{
"id": 11,
"url": "https://s3.amazonaws.com/...",
"order": 1
},
{
"id": 12,
"url": "https://s3.amazonaws.com/...",
"order": 2
}
]
But when I add the uploader, my JSON ends up looking like this:
"photos": [
{
"id": 3,
"url": {
"url": {
"url": "https://bucket-name.s3.amazonaws.com/uploads/photos/https%3A//s3.amazonaws.com/bucket-name/uploads/folder/photos/img-name.jpg"
}
},
"order": 2
},
{
"id": 2,
"url": {
"url": {
"url": "https://bucket-name.s3.amazonaws.com/uploads/photos/https%3A//s3.amazonaws.com/bucket-name/uploads/folder/photos/img-name.jpg"
}
},
"order": 1
}
],
Everything works fine, but the JSON is just so messy looking, and a pain to iterate over. Also, can anyone explain why the URL is so weird looking, repeating itself twice?
Jbuilder code:
json.exercises current_user.current_training_week.exercises.uniq do |exercise|
json.id exercise.id
json.name exercise.name
json.description exercise.description
json.photos exercise.photos, :id, :url, :order
json.videos exercise.videos, :id, :url
end
Thanks!
#Arel, if you need to keep same json hash structure, just override :serializable_hash method in your uploader class:
class PhotoUploader < CarrierWave::Uploader::Base
def serializable_hash
model.read_attribute :url
end
end
When you do something like mount_uploader. CarrierWave will override the read column method and replace it with return an object of your uploader.
So when you try to call url on photo it return you an uploader with url method so it will keep calling url, and get the url value. So there are three url in your json.
But you can still use url_url methods get the origin value.
So if you just want to get the specific url, just do like this will be OK.
json.photos exercise.photos, :id, :url_url, :order #url_url is the url column value.
I keep getting a "No model was found for '0'" error when trying to connect an Ember.js app to a Rails 3.2 API. My setup is below. Any help will be greatly appreciated.
Items Controller (Rails)
def index
#items = Item.all
respond_to do |format|
format.html
format.json { render json: #items, root: true }
end
end
App.js (Ember.js)
App = Ember.Application.create();
App.Router.map(function() {
this.resource('items', function() {
this.route('backlog');
this.route('board');
});
});
App.ItemsRoute = Ember.Route.extend({
model: function() {
return this.store.find('item');
}
});
Server response when the Ember app makes request to /items
[
{
"item": {"id":1,"item_type":"Item","name":"Test item"}
},
{
"item": {"id":2,"item_type":"Item","name":"Test item 2"}
}
]
Assuming that you're using Ember-Data, your JSON format is incorrect. It's fairly poorly documented, so don't feel bad. The RESTAdapter has a brief example, but the JSON API goes into more details. In your case, I think you want your response to look like this:
{
"items": [
{ "id": 1, ... },
{ "id": 2, ... }
]
}