I have an object containing questions data.
I'm looping through these in the view and then aiming to update the objects 'answer' value.
The questions come from an API and are structured as:
[
{
"id": 1,
"choices": [
// choices
],
"created_at": "2016-12-08 09:19:30",
"updated_at": "2016-12-09 15:29:14",
"answer": []
},
]
They don't come from the API with an answer value but I have added it in the js file.
I then show the question answers in another loop:
<div v-for="(choice, index) in question.choices" class="input-row">
<input type="radio" v-model="question.answer" value="choice.value"/>
</div>
I then out the answer into the view:
#{{ question.answer }}
I can see it's an empty array, but when selecting the radio button the array isn't updated like I thought it would. Any ideas?
Your input have wrong markup to bind the value with a Vue data property.
<div v-for="(choice, index) in question.choices" class="input-row">
<input type="radio" v-model="question.answer" v-bind:value="choice.value"/>
</div>
Related
Really sorry, I know this has been posted before but I just didn't understand how the answers related to my problem. I'm very new to react and need a bit more help than I could find.
My app project has reviews like this;
const restaurantData = [
{
id: 1,
restaurantName: "Restaurant 1",
address: "4, Dolphin Way, Swansea SA10 5BZ",
lat: 48.8737815,
long: 2.3501649,
ratings: [{ ratingID: 1, stars: 2, comment: "Terrible service, Yikes!" }],
},
];
And I have accessed the data no problem like this;
function RestaurantItem({ restaurant }) {
return (
<div className="restaurantItem" id={restaurant.id}>
<h2 className="AsideHeader">{restaurant.restaurantName}</h2>
<p className="AsideAddress">{restaurant.address} </p>
</div>
);
}
I would basically like to access the review data specifically by doing something like this;
<div>
<p>{restaurant.ratings.stars} STAR : </p> {restaurant.ratings.comment}
</div>
But I am not having any luck. Can someone explain what I am doing wrong and how to address it ? Or even what else I would call this to look up the solution?
Thank You !
ratings is an array, so you can't access the data as ratings.stars or ratings.comment.
An approach would be to use map to iterate through the ratings and display all of them for that specific restaurant.
<div>
{restaurant.ratings.map((rating) => (
<p key={rating.ratingID}>{`${rating.stars} STAR: ${rating.comment}`}</p>
))}
</div>
Inside your const restaurantData the ratings is an array. If there is only 1 rating then remove the array:
ratings: { ratingID: 1, stars: 2, comment: "Terrible service, Yikes!" }
If there will be multiple ratings then use .map to loop every single one.
{restaurant.ratings.map((rating) => (
<div key={rating.ratingID}>
<p>{rating.stars} STAR : </p> {rating.comment}
</div>
))}
Since restaurant.ratings is a list you can't display it just like a string.
You could display them like this:
<div>
{restaurant.ratings.map((rating, index) => (
<p key={"rating-" + rating.ratingID}>
{rating.stars + " STAR : " + reating.comment}
</p>
))}
</div>
The map method of the list iterates over every element and returns each as "described" by the anonymous method as a JSX Element.
You call props on array, but you need call prop on element of array.
If the ratings property always has one element, then you can write it like this, but it will be a crutch
function RestaurantItem({ restaurant }) {
return (
<div className="restaurantItem" id={restaurant.id}>
<h2 className="AsideHeader">{restaurant.restaurantName}</h2>
<p className="AsideAddress">{restaurant.address} </p>
</div>
<div>
<p>{restaurant.ratings[0].stars} STAR : </p> {restaurant.ratings[0].comment}
</div>
);
}
#lich reported correctly, to work with an array, you must use the map method
using reactjs list look here
js arrays
Hello I am trying react for the first time and I am having some trouble with my filter function.
Here's the code:
So this is my render method in my component:
const categoryFilter = this.state.appItems.filter(item =>
item.categories.filter(str => {
return str.includes(active);
})
);
const appList = categoryFilter.map(appItem => (
<AppItem appItem={appItem} key={appItem.id}></AppItem>
));
return (
<React.Fragment>
<div className="flex-container">
<NavCategories
categories={this.state.categories}
onClick={this.handleClick}
active={active}
/>
<section className="apps-list">
<header>
<input type="text" placeholder="Search by App" />
</header>
<ul>{appList}</ul>
</section>
</div>
</React.Fragment>
);
this.state.appItems is an array coming from a json file, here's a snippet:
[ {
"id": "12312",
"name": "Test",
"description": "test.",
"categories": ["Voice", "Delivery", "Optimization"],
"subscriptions": [
{
"name": "Trial",
"price": 0
},
{
"name": "Professional",
"price": 3500
}
]
},]
Active is a string to manage active class items on another component.
Everything renders correctly, but it is never filtered even though the active state is changing everytime.
I have tried multiple ways, but this Filter method is getting me confused a lot because I want to filter an array thats inside another array and want to filter the whole AppItem array.
If anyone could explain/give me some tips I would love it. Thanks in advance :)
Array.filter() returns a new array with the filtered elements in it. So your inner filter will always return an array of at least zero elements, which evaluates to a truthy value, and your outer filter will just include every element in the original array.
Just switch your inner filter to be an Array.includes() instead, which will return true or false.
const categoryFilter = this.state.appItems.filter(item =>
item.categories.includes(active)
);
Blocks are created through a loop, there is a select in each block. Tell me how when clicking on a button, take the selected values from all created selects?
I tried join ref to select, and v-model, but not one of them is working properly
<div v-for="attribute in attributes" class="col">
{{ attribute.name }}
<select ref="selectedVariation" class="form-control">
<option selected>---</option>
<option v-for="variation in attribute.variations"
:key="variation.id"
:value="variation.id">
{{ variation.name }}
</option>
</select>
</div>
<button class="btn btn-success" #click="addItemToCart()">Test</button>
Hi Данил and welcome to stack overflow. There's not enough detail in the question to provide an exact solution, but the following hints might get you started. Also, there are several different approaches that could work; this is just one possibility.
First, include a property in the attributes objects that can be used to track the selected value, perhaps calling it .selected.
data: {
attributes: [
{name: "Name 1", selected: null, variations: [/*...*/]},
{name: "Name 2", selected: null, variations: [/*...*/]},
// ...
]
}
Second, tell Vue about that property using the v-model directive:
<select
class="form-control"
v-model="attribute.selected"
>
Then, when the button is clicked, the code can simply read the appropriate values:
methods: {
addItemToCart() {
// get an array of variation.id values
selectedArray = this.attributes.map(attribute => attribute.selected);
}
}
Example based on Aurelia doc.
Page code:
export class MyPage {
products = [
{ id: 0, name: 'Motherboard' },
{ id: 1, name: 'CPU' },
{ id: 2, name: 'Memory' },
];
selectedProduct = null;
}
Page HTML:
<label>
Select product:<br/>
<select value.bind="selectedProduct">
<option model.bind="null">Choose...</option>
<option repeat.for="product of products"
model.bind="product">
${product.id} - ${product.name}
</option>
</select>
</label>
<div if.bind="selectedProduct">
Selected product 1: ${selectedProduct.id} - ${selectedProduct.name}
<div if.bind="selectedProduct.id > 0">
Selected product 2: ${selectedProduct.id} - ${selectedProduct.name}
</div>
</div>
When selecting CPU, then selecting null value, then selecting Memory, Selected product 1 is updated correctly with a value from a select element, but Selected product 2 is stuck with a CPU value.
How to bind selected value correctly inside the inner div?
In my application, I want to be able to display a content of selected item. Depending on an item type, I have a several <div if.bind="item.type === N">...</div> elements in order to display different HTML for each type of an item.
Note: binding doesn't work with newest packages, but works fine when I assign specific versions to the following packages in my package.json:
"aurelia-templating": "1.4.2"
"aurelia-templating-binding": "1.3.0"
"aurelia-templating-resources": "1.4.0"
"aurelia-templating-router": "1.1.0"
I got a view in which lies the following <div>
<div ng-repeat="product in Product_List" ng-show="Product_List.length >=1">
<input type="text" ng-model="product.ProductCode" ng-value="CurrentProduct.ProductCode">
<input type="text" ng-model="product.ProductName" ng-value="CurrentProduct.ProductName">
</div>
Now push to the Product_List array, resulting in having the elements above repeated as follows,
$scope.Product_List.push({
"ProductCode": "",
"ProductName": ""
});
So far so good, but following is my problem,
How do i make an array as follows every time i add elements to the Product_List ?
[
{
"ProductCode" :"P1",
"ProductName" :"Coffee"
},
{
"ProductCode" : "P2",
"ProductName" : "Beer"
}
]
You can use the same product object for current value it will update the object value. http://jsfiddle.net/sudeep1049/jbj4movu/
<input type="text" ng-model="product.ProductCode" >
<input type="text" ng-model="product.ProductName">