For users who are getting the mentioned error while using angular slick-grid :
Angular slick grid needs a column named 'id' for each row.
From typescript, after getting the data from the api, you can call other function which will do the following
addId() {
this.apiData.forEach((item, index) => {
item.ids = index+1;
}
);
this.datasetRecords = this.apiData;
}
// assign the datasetRecords to the angular grid
Related
Im adding VueJs Components to my Laravel App and im struggling with this question:
I have 2 models, Concessions and Brands, with a ManyToMany relationship like this:
Concession Model
public function brands()
{
return $this->belongsToMany('App\Brand');
}
Brand Model
public function concessions()
{
return $this->belongsToMany('App\Concession');
}
in the controller im fetching the data from all the Concessions and returning to the view like this:
public function concessions()
{
$concessions = Concession::all();
return view('MyConcessionsView', compact('concessions'));
}
on my Laravel View i can access to $concessions[0]->brands with no problem and everything is working fine.
So, im adding my Vue component, and i'm passing the prop $concessions to that component:
<concessions-map :con="{{ $concessions }}"></concessions-map>
On my Vue component im accepting the prop 'con' and i can display all the elements from that array. BUT i need access from each brand form each concession and when i try, for example, display con[0].brands[0] or even con[0].brands it gives me the error Cannot read property 'brands' of undefined".
I even pass this prop to State on Mounted() lifecycle method:
mounted() {
this.concessions = this.con;
}
and on Vue DevTools i have the array with 35 objects.. but i can access the property brands from each one.
Any advice?
Thanks (a lot) in advance!
$concessions = Concession::with('brands')
This is what you need.
when you execute
$concessions[0]->brands
You are making a new request to the database.
hi,
you can work with Axios is a better way so
-1 define a function in your concessions controller to get every concessions with its brands
public function getConcessions(){
$concessions= Concession::with('brands');
return $concessions;
}
-2 define a route to fetch this data in your web.php
for example
Route::get('/concessions/getData','ConcessionController#getConcessions');
-3 fetch data with axios from your vuejs component
loadConcessions(){
axios.get("/concessions/getData")
.then(({data}) => {
this.concessions = data.data
});
and do not forget to add this function in your mounted methode
mounted() {
this.loadConcessions()
}
-4 now you can display the data fetched in your vuejs component
in your case you do for example
{{concessions.brands}}
and even you can read it as a loop with v-for for example read it in a table
<tr v-for="concession in concessions.data" :key="concessions.id">
<td class="text-center">{{concession.brands}}</td>
</tr>
so for each concession, it will display its brands
My api receives an json object posted from my React app. The object has two properties, one holding an array of objects and the other holds an id number. Because the first array cannot be validated by Symfony's form validation, I have created an custom restraint for it.
$data = json_decode($request->getContent(), true);
$custom_constraint = new Assert\blah blah;
$errors = $validator->validate($data['datas'], $custom_constraint );
if (count($errors) > 0 ) {
$errorsString = (string) $errors;
return new JsonResponse(
[
'validation failed' => $errorsString
]);
}
This validation works by itself, but I also want to add the validation for the id number
$errors = $validator->validate($data['id'], new Assert\Type('integer'));
Now I have two results in the $errors object, how do I combine them into one error object that output errors for any one of them?
You should use AssertCollection. It's demonstrate here: How to Validate Raw Values
I am using Redux form v6.5.0 and having a requirement of
Removing the validation for any Field when the disabled props is passed as true.
I wrote a custom logic to disable the validation inside render() of custom field component, but looks like updateSyncErrors() is not getting called on the form even after updating the values manually. Because of this, syncErrors object is persisting the field validation error.
if (field.disabled) {
field.meta.invalid = false;
field.meta.error = undefined;
field.meta.valid = true;
}
Can we have some straight forward - simple & better approach which tackles this requirement and fixes this issue?
I faced the same situation, I wanted to disable or enable fields based on API response and according to that, I had to enable and disable validations also. I was able to do that in the below way
Input Field (select field)
<Field
formItemLayout={layout}
name="configType"
validate={
!(
response &&
response.data &&
response.data.isEnabled
)
? [required]
: undefined
}
component={ASelectField}
placeholder="configType"
disabled={
response &&
response.data &&
response.data.isEnabled
}
onChange={(e) => changeconfigSelectFields(e)}
onBlur={(e) => {
e.preventDefault();
}}
>
{Object.keys(fields.data).map(
(obj) => {
return <Option key={obj}>{obj}</Option>;
}
)}
</Field>
top of the class I Add below method
const required = value => value ? undefined : 'Required'
You can disable the validation of a specific field by passing disableValidation array with field names in your form configuration object. Then you can check if this array contains the field name and if it doesn't provide the field with validation functions.
I suppose an example would demonstrate this best: https://www.webpackbin.com/bins/-Kf7WYdGZtEypx080L99
A javascript code uses "map" method on array of object to extract just the text value:
var checked_leaves = checked_ids.filter(function(elm) {
if (elm.children.length == 0)
return elm;
}).map(function(elm, index) {
return elm.text.trim();
});
this array of string is sent to a Laravel route using ajax (with Vue http)
this.vm.$http.get(this.el.action + checked_leaves).then((response) => {
console.log(response);
//this.vm.speciesDetails = JSON.parse(response.data);
}, (response) => {
});
Where the this.el.action is api/taxonomytospecies/ and the corresponding Route is:
Route::get('api/taxonomytospecies/{ids}', 'TaxonomyController#getSpeciesFromTaxonomy');
And inside TaxonomyController:
public function getSpeciesFromTaxonomy($ids) {
// Eloquent job to retrieve the data from the DB
}
1) Is there a better way to pass an array of values like the one I get from the javascript code (they are a lot of strings) to a route of a controller?
2) I get an internal 500 error. The error shows that the call is like :
api/taxonomytospecies/name1,name2,name3,name4,name5
But i don't know how to resolve this kind of error
I would suggest you to use post request instead of get as the data is large.
You can send data as an array to the server.
var data = {ids: checked_leaves};
Then send data variable in your post request.
In your controller you can get data as:
public function getSpeciesFromTaxonomy() {
$ids = request()->get('ids') // returns an array.
// Eloquent job to retrieve the data from the DB
}
And your route should be as:
Route::post('api/taxonomytospecies', 'TaxonomyController#getSpeciesFromTaxonomy');
The solution is to set the Route as:
Route::get('api/taxonomytospecies/', 'TaxonomyController#getSpeciesFromTaxonomy');
And the Vue-resource request as:
this.vm.$http.get(this.el.action, {params: { ids: checked_leaves } }).then((response) => {
but i don't understand why.
On a Yii2 project, in a user's Edit Info form (inside a modal):
I'm currently figuring out which fields were changed using the jQuery .change() method, and I'm grabbing their value with jQuery's .val() method.
However, I want to do less with JavaScript and do more with Yii's framework.
I can see in the Yii debugger (after clicking into the AJAX POST request) that Yii is smart enough to know which fields were changed -- it's showing SQL queries that only UPDATE the fields that were changed.
What do I need to change in the controller of this action to have Yii include the name of the field changed -- including it's value -- in the AJAX response? (since my goal is to update the main view with the new values)
public function actionUpdateStudentInfo($id)
{
$model = \app\models\StudentSupportStudentInfo::findOne($id);
if ($model === null) {
throw new NotFoundHttpException('The requested page does not exist.');
}
$model->scenario = true ? "update-email" : "update-studentid";
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->renderAjax('_student_support_alert_success');
}
return $this->renderAjax("_edit_student_info",[
"model" => $model,
]);
}
I'm currently returning a static success view.
You can use $model->dirtyAttributes just after load the data to get a $attrib => $value pair array.
http://www.yiiframework.com/doc-2.0/yii-db-baseactiverecord.html#getDirtyAttributes()-detail (this docs says:)
Returns the attribute values that have been modified since they are loaded or saved most recently.
The comparison of new and old values is made for identical values using ===.
public array getDirtyAttributes ( $names = null )
(sorry for formatting, sent by mobile)