I am a newbie with Vue and I am trying to run an IF statement inside two v-fors.
Basically I am trying to compare a value from one array of objects to a value of another array of objects and if true, render value from array of objects No 2.
Here is the code.
<div v-bind:class="[isActive ? 'projectsWorkingOnActive' : 'projectsWorkingOnInactive']" v-for="rec in listOfEmployees" v-bind:key="rec.id" >
<div v-for="proj in dummyProjectsData" v-bind:key="proj.id">
<div v-if="rec.name.display_value == proj.task_owner">
<h3>Projects Working On</h3>
<ul>
<li>{{proj.projects_working_on.project_name}}</li>
<li><submitbutton button_label="Hide Projects" #click="toggleClass()"></submitbutton></li>
</ul>
</div>
</div>
</div>
And here are my 2 arrays of objects.
const dummyProjectsData = [
{
ID: "44000005501077",
task_owner: "Denis Denchev",
projects_working_on: [
{
"project_name": "Project-1",
"project_id": "195000002362044"
},
{
"project_name": "Project-2",
"project_id": "195000002362045"
},
{
"project_name": "Project-3",
"project_id": "195000002362046"
},
]
},
{
ID: "44000005501078",
task_owner: "Jake Jones",
projects_working_on: [
{
"project_name": "Project-2",
"project_id": "195000002362044"
},
{
"project_name": "Project-5",
"project_id": "195000002362045"
},
{
"project_name": "Project-3",
"project_id": "195000002362046"
},
]
},
]
And the second array...
const listOfEmployees = [
{
"ID": "44000005527013",
"name": {
"display_value": "Denis Denchev",
"first_name": "Denis",
"last_name": "Denchev",
"prefix": "",
"suffix": "",
}
}
]
What am I doing wrong? It must be something silly that I am missing? Or can I not do if statement taking value from two v-for's ?
The problem is that proj.projects_working_on is an array of multiple projects, but you are trying to access a property on it like an object. Change to something like:
<div v-bind:class="[isActive ? 'projectsWorkingOnActive' : 'projectsWorkingOnInactive']" v-for="rec in listOfEmployees" v-bind:key="rec.id" >
<div v-for="proj in dummyProjectsData" v-bind:key="proj.id">
<div v-if="rec.name.display_value == proj.task_owner">
<h3>Projects Working On</h3>
<ul>
<li v-for="p in proj.projects_working_on" v-bind:key="p.project_id">
{{ p.project_name }}
</li>
<li><submitbutton button_label="Hide Projects" #click="toggleClass()"></submitbutton></li>
</ul>
</div>
</div>
</div>
Related
I am new to React JS, I want to render this JSON containing Category and list of items below that category. Consider state.miData has this array response from server. It has category and list of menu items under that category. I want to show it in UI like Category and under that category list of items those fall in that category.
[
{
"category": {
"name": "Pasta",
"id": "P1"
},
"items": [
{
"menuItemId": "1",
"menuItemName": "Alfredo-Pasta"
},
{
"menuItemId": "2",
"menuItemName": "Macroni-Pasta"
}
]
},
{
"category": {
"name": "Burger",
"id": "B1"
},
"items": [
{
"menuItemId": "2",
"menuItemName": "UB-Burger"
},
{
"menuItemId": "1",
"menuItemName": "Thela-Mela-Burger"
}
]
}
]
I have written this code in render function but its not working.
const data = this.state.miData
const listItems = data.map((d) =>
<div>
<p key={d.category.id}>{d.category.name}</p>
<ul>
d.items.map((mi) =>
<li>{mi.menuItemName}</li>
);
</ul>
</div>
);
return (
<div>
{listItems}
</div>
);
Thanks in advance.
Try wrapping up the map for the list item in the curly braces.
<ul>
{
d.items.map((mi) =>
<li>{mi.menuItemName}</li>
);
}
</ul>
I am still learning Vue.js. At the moment I am trying to make a simple filtered list method that pulls the data from a json file in Vue. I think that I am having trouble figuring out the correct syntax.
I just cant seem to get it right. Any help is more than welcome :)
This is Vue file:
<template>
<section>
<ul>
<li v-for="product in rings" :key="product">
{{product.title}}
</li>
</ul>
</section>
</template>
<script>
import data from '#/assets/data.json';
export default {
data() {
return {
products: []
}
},
methods: {
computed: {
rings(){
return this.products.filter(product => product.type == 'Ring')
}
}
}
}
</script>
And this is the Json file:
{ "products": [
{
"title": "Ring 1",
"description": "something",
"type": "Ring",
"year": "2018",
"image": "...",
"price": "2000,00 kr."
},
{
"title": "Halskæde 1",
"description": "something",
"type": "Halskæde",
"year": "2018",
"image": "...",
"price": "2000,00 kr."
},
{
"title": "Armbånd 1",
"description": "something",
"type": "Armbånd",
"year": "2018",
"image": "...",
"price": "2000,00 kr."
},
{
"title": "Ørering 1",
"description": "something",
"type": "Ørering",
"year": "2018",
"image": "...",
"price": "2000,00 kr."
}
]
}
You imported the data but never used anywhere inside the component:
import data from '#/assets/data.json';
// notice the data here is just a variable and it has nothing to do with the
// component's data property
export default {
data () {
return {
products: data.products // init products with imported data
}
},
Or with the destructuring syntax:
import { products } from '#/assets/data.json';
export default {
data () {
return {
products // init products with imported data
}
},
I have jsons like this one:
JSON "myWelcome"
[
{"BACKGROUND": {
"BACK": {
"NAME": "asd"},
"AGE": "13",
"YEAR": "2016"
}},
{"NAILS": {
"BACK": {
"NAME": "asd"},
"AGE": {
"AG": "14"},
"YEAR": "2014",
"CENT": "dsds"
}}
]
What i need to do is show everything from this json in <ul> or table, but not by name. My HTML:
<ul ng-repeat="(key, value) in myWelcome">
<ul ng-repeat="val in value">
<ul ng-repeat="(o, values) in val">
<li>{{o}}</li><li>{{values}}</li>
</ul>
</ul>
</ul>
It not quite work because "NAME" in "BACK" shows all.
Thanks for answers in advance.
You can use this code to make it work, but it will only work on this data sample or a similar one, any changes in the JSON might break it also.
<ul ng-repeat="(key, value) in myWelcome">
<ul ng-repeat="val in value">
<ul ng-repeat="(o, values) in val">
<li>{{o}}</li><li ng-if="key=='NAILS'&& o=='AGE'" >{{values.ag}}</li><li ng-if="!key=='NAILS'&& o=='AGE'">{{values}}</li>
</ul>
</ul>
</ul>
You can first remove all the properties having key as NAME recursively then iterate using ng-repeat.
DEMO
var jsonObj = [
{"BACKGROUND": {
"BACK": {
"NAME": "asd"},
"AGE": "13",
"YEAR": "2016"
}},
{"NAILS": {
"BACK": {
"NAME": "asd"},
"AGE": {
"AG": "14"},
"YEAR": "2014",
"CENT": "dsds"
}}
];
function removeMeta(obj) {
for(prop in obj) {
if (prop === 'NAME')
delete obj[prop];
else if (typeof obj[prop] === 'object')
removeMeta(obj[prop]);
}
};
removeMeta(jsonObj);
console.log(jsonObj);
Can anyone please help to solve my problems.
in angular js. I have below json and HTML file
test.json
{
"list": [
{
"id": 1,
"Name": "Name 1"
},
{
"id": 2,
"Name": "Name 2"
}
]
}
array.json
{
"list": [
{
"id": 1,
"time": [
{
"time1": "10.00am",
"time2": "10.10am",
"time3": "10.20am",
"time4": "10.30am"
}
]
}
I need output like below
id: 1
Name: Name1
time: 10.00am, 10.10am, 10.20am, 10.30am
id: 1
Name: Name1
time: 10.00am, 10.10am
Thanks in Advance
HTML
<div class="abc" ng-repeat="data in datas[0].list">
ID:{{data.id}}<br>
Name:{{data.Name}}<br>
Time:
<ANY ng-repeat="times in data.time[0]">
{{times}}
</ANY>
<hr>
</div>
Controller
$scope.datas=[{
"list": [
{
"id": 1,
"Name": "Name 1",
"time": [
{
"time1": "10.00am",
"time2": "10.10am",
"time3": "10.20am",
"time4": "10.30am"
}
]
},
{
"id": 2,
"Name": "Name 2",
"time": [
{
"time1": "10.00am",
"time2": "10.10am"
}
]
}
]
}];
You can use ng-repeat in your case something link below.
<span ng-repeat="list in myList">
Id : {{list.id}}<br/>
Name : {{list.Name}}<br/>
<span ng-repeat="tm in times | filter:{id: list.id}">
Time : <span ng-repeat="tim in tm.time">
<span ng-repeat="t in tim">
{{t}}{{$last ? '' : ', '}}
<span>
</span>
</span><br/>
</span>
Here is the working pen for you.
Codepen
I have two JSON formats,
JSON -
[
{
"name":"Alex",
"country":"United States"
},
{
"name":"Jaswanth",
"country":"India"
}
]
AngularJS Code -
I was able to display the output
<div ng-repeat="result in results">
{{result.name}} - {{result.country}}
</div>
But if I change my JSON, I am not able to see the output..
[
{
"info": [
"one",
"two",
{
"id": 944589,
"contractYear": 2014
}
],
"country": "India",
"name": "jaswanth"
},
{
"info": [
"three",
"four",
{
"id": 944589,
"contractYear": 2014
}
],
"country": "US",
"name": "jass"
}
]
How to I change my AngularJS code ?
<div ng-init="init();">
<div ng-repeat="result in data">
{{result.name}} - {{result.country}}
<br/>
<div ng-repeat="(k,v) in result.info">
<span ng-if="v.id">The id is: {{v.id}}</span>
<span ng-if="(!v.id)">{{v}}</span>
</div>
<hr/>
</div>
</div>