Getting an array of checkbox values in the controller - checkbox

In the form there is such group of checkboxes
$form->field($model, 'ingredients')->checkboxList(
ArrayHelper::map($ingredients, 'id', 'name')
)
In html it looks like
<input name="Dish[ingredients][]" value="1" type="checkbox">
<input name="Dish[ingredients][]" value="2" type="checkbox">
How I can get an array of checkboxes values in the actionCreate method of controller?
I trying do it like this
Yii::$app->request->post('Dish[ingredients]', [])
but I get an empty array.
Addition:
Ingredients property is not present in generated model Dish, I'm had added it later by the hand. Dish and Ingredients have a many to many relationship.
How to add ingredients to theDish model correctly?
Now if I do
$model = new Dish();
$model->load(Yii::$app->request->post());
var_dump($model->ingredients);
$model->ingredients is empty array.

Create the ingredients attribute in the Dish model:
public class Dish {
public $ingredients;
...
}
Load all the post data to your model and then access the ingredients array:
$model = new Dish();
$model->load(Yii::$app->request->post());
var_dump($model->ingredients);

Related

Laravel - Display Array/String Object in view from database

Data are stored as ["item_1", "item_2"] in database like shown below.
I want to display those data in view blade properly.
Product Model
protected $fillable = ['name', 'prod_id'];
public function models() {
return $this->hasMany(Model::class, 'prod_id');
}
Model Model
protected $fillable = ['model', 'prod_id'];
protected $cat = ['model'=>'array'];
public function model()
{
return $this->belongsTo(Product::class, 'prod_id');
}
Controller - store method
public function create (Request $request, Product $product){
$models = new Model;
{
$model = json_encode(request('models'));
$items->models = $model;
$product->models()->save($models);
}
}
Controller show method
public function show(request $id){
$product = Product::findorfail($id);
$models = Model::with(['model'])->where('prod_id', $product->id)->get();
return view ('show', compact('product', 'models'));
Create View
<input type="checkbox" name="model[]" value="Samsung">
<input type="checkbox" name="model[]" value="Nokia">
<input type="checkbox" name="model[]" value="Apple">
<button>Add Model</button>
I tried show view:
#foreach($models as $model)
{{ json_decode($model->models) }}
#endforeach
It throws
htmlspecialchars() expects parameter 1 to be string, array given
What am I missing.
PS: MySQL does not support json column, so I saved as text column.
you need to do someting like this.
Model Model
protected $fillable = ['models', 'prod_id']; // screenshot says that the field name is "models"
protected $cast = ['models' => 'array']; // the property is $cast no $cat
public function product()
{
return $this->belongsTo(Product::class, 'prod_id');
}
ModelController - store method
public function store (Request $request){
$product = Model::create([
'models' => json_encode($request->models),
'prod_id' => $request->prod_id
]);
return redirect()->back()->with('success', 'created!');
}
public function show(Request $id){
$model = Model::findOrFail($id)->with('product');
return view ('model.show', compact('model'));
}
ProductController show method
public function show(request $id){
$product = Product::findOrFail($id)->with('models'); // the method name is findOrFail() no findorfail
// $models = Model::with(['model'])->where('prod_id', $product->id)->get();
return view ('show', compact('product'));
}
Into the show View
#foreach($product->models as $models)
#foreach(json_decode($models->models) as $model)
{{ $model }}
#endforeach
#endforeach
Your Models Model confuses me a little bit. You seem to have a field name model that's the same as a relationship method name. That means whenever you include that relation, it'd functionally override that property with data from the related table. (I say 'functionally' because you're using dynamic properties, whereas it is actually possible to explicitly tell Eloquent whether you want an attribute or relation without making it guess.)
That said, your $model->models property could be coming back as an array for one of two reasons. The first is that it may be accidentally referring to a relational data-set and not the JSON string you were expecting. The second is you've corrected the protected $cat = ['model'=>'array']; to read protected $cast = ['models'=>'array'];, and it's stepping on your toes now. By casting it to an array, it may be getting automatically get interpreted back into one before you call json_decode on it.
Either way, I'd dd($model->models) to see what it is first.
You need to change your foreach like this:
#foreach($models->models as $model)
{{ json_decode($model) }}
#endforeach
because Your array is like this
{"id":18,"prod_id":22,"models":{"id":22,"user_id":1}}
In here the $models is getting only id and prod_id models is still array so your foreach should be #foreach($models->models as $model)
Sample Code is here:
$arr = '{"id":18,"prod_id":22,"models":{"id":22,"user_id":1}}';
echo '<pre>';
foreach (json_decode($arr->models) as $str){
echo $str;
}

Dynamic checkbox from list with Thymeleaf

I try to save the values from dynamically created checkboxes:
<div>
<ul>
<li th:each="item, stat : *{users}">
<input type="checkbox" th:field="*{users[__${stat.index}__]}" th:value="${item}" />
<label th:text="${item}"></label>
</li>
</ul>
</div>
The controller provides the String items as follwing:
public List<String> getUsers() {
return users;
}
And the setter for the Strings is:
public void setUsers(final String[] users) {
for (final String string : users) {
System.out.println(string);
}
}
The values are correct shown in the html page. But when i click save button, and the setter is called, the values are empty. What can i do, where is the problem?
Any help would appreciate.
Please check out section about handlin multi-value checkboxes in Tutorial: Thymeleaf + Spring.
You should provide some model attribute (of type List<String>) containing all users possible to select. Let's call it selectableUsers.
Then it can collaborate with your form-backing bean (that one containing users) in a following manner:
<div>
<ul>
<li th:each="item : ${selectableUsers}">
<input type="checkbox" th:field="*{users}" th:value="${item}" />
<label th:for="${#ids.prev('users')}" th:text="${item}"></label>
</li>
</ul>
</div>
Note I think that getter and setter for a field should handle the same type, but they don't (getter returns List<String> however setter consumes String[])
What you are trying to do looks logical, but it does not work that way.
If you did not get it resolved you can do this instead:
In relevant method of your controller you can add list of titles for your checkboxes:
List<String> allUsers = Arrays.asList("abc","xyz"); // OR generate list dynamically
model.addAttribute("selectableUsers", allUsers);
Or add it to ModelAndView if that is what you are using.
Change your html to what was suggested by #Jakub Ch.
Change your getter and setter methods as follows:
private String users;
...
public String getUsers() {
return this.users;
}
public void setUsers(String users) {
this.users = users;
}
Then 'users' field will contain comma separated String values or their id numbers ( depending on how you set it up) indicating selected checkboxes. Then you can convert String values to array using code like below or if id numbers are stored get String values from your ArrayList.
public List<String> getStrings() {
return Arrays.asList(strings.split(","));
}
Hope it helps.

Using ui-typeahead to populate model with object but show string of that model

Hello everyone I have the following code using ui-angular typeahead
<input type="text" ng-model="itemSelected"
uib-typeahead="item.name for item in getItems()" id="itemInput" class="form-control">
the data that getItems() returns is of this structure:
[{itemId : 12345, name : "name of item"} ....]
Now what I would like to happen is the type ahead to give it's suggestions by showing item.name (which it currently does!) however what it does is sets itemSelected to the string not the object.
if I change the html such that the list comprehension reads item for item in getItems() I get the typeahead giving me the object (not what I want) although it does set the itemSelected variable to the object of my selected typeahead.
I would like the typeahead to display item.name but I would like the object item to be put into itemSelected. How can I achieve that?
You can try the following...it works fine
https://plnkr.co/edit/Zsgw5RKAEi5C2IKLcpGR?p=preview
<div>seleted state: {{state4}}</div>
<input type="text" ng-change="onedit()" ng-model="state4" uib-typeahead="state as state.name for state in states | filter:$viewValue | limitTo:8">

Spring MVC, Angular AngularJS drop-down list - problems on persist ManyToOne

Problem: I have a Purchase Order table and Country table which primary key is a foreign key in my PO table. On the front end I have a form (angularJS) used for creation of a new PO with a bunch of fields and about 9 drop-down list fields form where user can select whatever info is required for the PO.
For the sake of the example I will use the Country drop-down. (All drop-downs are getting populated from the DB).
The problem I have is with the persistence. After submitting the form, if I use the debugger and I check the Purchase Order object that is being passed to the service all my drop downs objects are null, except the other normal input fields which belong to the PO table.
I think the problem is Angular, If I check the network tab in my chrome browser under developer tools I see the country being passed as countryData:2. Thing is I am new to Angular so I am bit confused at this stage on how I should handle this as data is coming from the drop-down list and how I should return the country object. Here http://tinypic.com/r/2rd9pxl/8 I put a screenshot of my network tab from the browser which show the from Data that is being posted.
Populate the country drop-down list
<div class="control-group">
<label class="control-label">*Country</label>
<div class="input-append">
<div data-ng-init="getCountryDataFromServer()">
<b>Person Data:</b> <select id="countryData" ng-model="contact.countryData">
<option value="">-- Select Countries --</option>
<option data-ng-repeat="country in countries" value="{{country.countryId}}">{{country.countryname}}</option>
</select><br>
</div>
</div>
<div class="input-append">
<label>
<span class="alert alert-error"
ng-show="displayValidationError && newContactForm.countryData.$error.required">
<spring:message code="required"/>
</span>
</label>
</div>
</div>
Model
#Entity
#Table(name = "PURCHASEORDER",schema = "POTOOL")
#Audited
public class PurchaseOrder {
#Id
#GeneratedValue
private int id;
private String tower;
private Double revenue;
//other properties of the PO
#ManyToOne(fetch=FetchType.EAGER)
#JoinColumn(name = "country_id")
private Country country;
//Other ManyToOne relationships
//Getter and setters
Controller
#RequestMapping(method = RequestMethod.POST, produces = "application/json")
public ResponseEntity<?> create(#ModelAttribute("contact") PurchaseOrder purchaseOrder,
#RequestParam(required = false) String searchFor,
#RequestParam(required = false, defaultValue = DEFAULT_PAGE_DISPLAYED_TO_USER) int page,
Locale locale) {
purchaseOrderServiceImpl.save(purchaseOrder);
if (isSearchActivated(searchFor)) {
return search(searchFor, page, locale, "message.create.success");
}
return createListAllResponse(page, locale, "message.create.success");
}
Service
public void save(PurchaseOrder purchaseOrder) {
purchaseOrderRepository.save(purchaseOrder);
}
Repository
public interface PurchaseOrderRepository extends
PagingAndSortingRepository<PurchaseOrder, Integer> {
}
I don't think there is any issue because of angular since you have defined ng-model="contact.countryData" for dropdown and option has value from value="{{country.countryId}}". When you submit value country.countryId is going to server which is absolutely fine. I think you should have conversion mechanism which will convert data from UI to Hibernate Entity(i.e. PurchaseOrder). Generally DTO(Data transfer Object) is used to get data from UI and using setter and getter we set to Hibernate entity and latter you will save that entity.
This question might help you.
DTO to Entity And Entity to DTO
When you are working with HTML(not with JSP), it better to use #RequestBody at place of #ModelAttribute to get complete body of data. Please refer the following links:
Link 1
Link 2

Use checkboxes in angularjs to manage array of objects

I had asked a question about
How to associate objects as models using ng-options in angularjs.
And I got an awesome answer very fast. My followup questions is that the response uses <select mutiple> to handle the child object array.
You can see a working example of what I want, working with <select> at http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview
How can I use <input type='checkbox'> (instead of <select>) to handle that object array i.e. ng:model="shirt.colors" while repeating the items from colors object array.
The reason, this appears so complicated to me is that I have to manage an array of objects instead of array of values... for example, if you look in the fiddle, there are color objects and shirt object that has multiple colors.
If the color object changes, it should change the corresponding color objects in shirt objects.
Thank you in advance.
You just need some intermediate value in your scope, and bind checkboxes to it. In your controller - watch for it changes, and manually reconstruct shirt.colors, according to it value.
<div ng-repeat='shirt in shirts'>
<h3>Shirt.</h3>
<label>Size: <input ng-model='shirt.size'></label><br/>
<label>Colors:</label>
<label ng-repeat="color in colors">
{{color.label}} <input ng-model="selection[$parent.$index][$index]" type="checkbox"/>
</label>
</label>
</div>
And in your controller:
$scope.selection = [[],[]];
$scope.$watch('selection', function () {
console.log('change', $scope.selection);
angular.forEach($scope.selection, function (shirtSelection, index) {
$scope.shirts[index].colors = [];
angular.forEach(shirtSelection, function (value, index2) {
if (value) $scope.shirts[index].colors.push($scope.colors[index2]);
});
});
}, true);
You can test it here: http://plnkr.co/edit/lh9hTa9wM5fkh3nT09RJ?p=preview

Resources