How to get value from two json files in angularjs - json

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

Related

Fill arrays in the first input with elements from the second based on common field

I have two files and I would need to merge the elements of the second file into an object array in the first file based on searching the reference field.
The first file:
[
{
"reference": 25422,
"order_number": "10_1",
"details" : []
},
{
"reference": 25423,
"order_number": "10_2",
"details" : []
}
]
The second file:
[
{
"record_id" : 1,
"reference": 25422,
"row_description": "descr_1_0"
},
{
"record_id" : 2,
"reference": 25422,
"row_description": "descr_1_1"
},
{
"record_id" : 3,
"reference": 25423,
"row_description": "descr_2_0"
}
]
I would like to get:
[
{
"reference": 25422,
"order_number": "10_1",
"details" : [
{
"record_id" : 1,
"reference": 25422,
"row_description": "descr_1_0"
},
{
"record_id" : 2,
"reference": 25422,
"row_description": "descr_1_1"
}
]
},
{
"reference": 25423,
"order_number": "10_2",
"details" :[
{
"record_id" : 3,
"reference": 25423,
"row_description": "descr_2_0"
}
]
}
]
Below is my code in es_func.jq file launched by this command:
jq -n --argfile f1 es_file1.json --argfile f2 es_file2.json -f es_func.jq
INDEX($f2[] ; .reference) as $details
| $f1
| map( ($details[.reference|tostring]| .row_description) as $vn
| if $vn then .details = [{"row_description" : $vn}] else . end)
I get the result only for the last record in 25422 reference with "row description": "descr_1_1" and not have "row_description": "descr_1_0"
[
{
"reference": 25422,
"order_number": "10_1",
"details": [
{
"row_description": "descr_1_1"
}
]
},
{
"reference": 25423,
"order_number": "10_2",
"details": [
{
"row_description": "descr_2_0"
}
]
}
]
I think I'm close to the solution but something is still missing. Thank you
This would be way easier if you used reduce instead.
jq 'reduce inputs[] as $rec (INDEX(.reference);
.[$rec.reference | tostring].details += [$rec]
) | map(.)' es_file1.json es_file2.json
Online demo
Here's a straightforward, reduce-free solution:
jq '
group_by(.reference)
| INDEX(.[]; .[0]|.reference|tostring) as $dict
| input
| map_values(. + {details: $dict[.reference|tostring]})
' 2.json 1.json

V-If inside V-for, inside V-for

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>

Map two Collections (Inner Join) using AngularJS HTML

I'm having two Collection user and Type. I wish to dispay Email ID which is marked as IsPreffered = TRUE and I need to map the email.Type to Type.ID
{ "user" : [
{
"Name" : "B. Balamanigandan",
"Email": [
{
"Id": "bala#gmail.com",
"IsPreffered": true,
"Type": 1,
},
{
"Id": "mani#gmail.com",
"IsPreffered": false,
"Type": 2,
}
]}
]};
{
"Type": [
{
"ID": 1,
"Name": "Private"
},
{
"ID": 2,
"Name": "Home"
},
{
"ID": 3,
"Name": "Business"
},
]}
HTML Source Code:
<span ng-repeat="email in collection.user[0].Email | filter: {IsPreffered : true} " ng-if="$last"> {{email.Id}}</span>
Here I need to Specify the Type "Private" for the above HTML. How to Map the user[0].Email.Type to Type.ID and fetch the appropriate Type.Name
Kindly filter the condition using HTML Level not in JavaScript Level. Kindly assist me.
I would suggest doing it in code rather than the markup, but if you need this is one way you can map to Type:
<span
ng-repeat="email in collection.user[0].Email| filter: {IsPreffered : true} "
ng-if="$last">
Email : {{email.Id}} ,
<span ng-repeat="typename in typeCollection.Type|filter:{ID : email.Type}">
Type: {{typename.Name}}
</span>
</span>
where typeCollection is :
$scope.typeCollection = {
"Type": [{
"ID": 1,
"Name": "Private"
}, {
"ID": 2,
"Name": "Home"
}, {
"ID": 3,
"Name": "Business"
}, ]
};
Please note that you needed one more ng-repeat in markup because filter works on an array.
EDIT:
You can also do this using ng-init:
<span
ng-repeat="email in collection.user[0].Email| filter: {IsPreffered : true} "
ng-if="$last">
Email : {{email.Id}} ,
<span ng-init="types = (typeCollection.Type|filter:{ID : email.Type})">
Type: {{types[0].Name}}
</span>
</span>
for(var i = 0; i < Type.length ; i++)
{
if(user[0].Email.Type to Type[i].ID)
{
user[0].Email.TypeName = Type[i].ID;
}
};
Html
<span ng-repeat="email in collection.user[0].Email | filter: {IsPreffered : true} " ng-if="$last">{{email.TypeName}} : {{email.Id}}</span>

How to display this JSON format using AngularJS

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>

Nested ng-repeat with JSON

I'm trying to set up a nested ng-repeat but can't quite figure out what's wrong. Nothing is printing in the nested ng-repeat
HTML:
<div ng-repeat="person in persons">
<p> {{ person.name }} </p>
<div ng-repeat="friend in person.mutual_friends">
{{ friend.name }}
</div>
</div>
JSON:
$scope.persons = [
{
name: 'First Person',
mutual_friends: [
{
name: 'Mutual Friend 1'
},
{
name: 'Mutual Friend 2'
},
]
},
{
name: 'Second Person',
mutual_friends: [
{
name: 'Mutual Friend 1'
},
{
name: 'Mutual Friend 2'
},
]
},
]
JSON was the issue.
Following JSFiddle code works :
https://jsfiddle.net/sushruthreddygade/hcpb229g/2/
JSON Structure:
[
{
"name": "First Person",
"mutual_friends": [
{
"name": "Mutual Friend 1"
},
{
"name": "Mutual Friend 2"
}
]
},
{
"name": "Second Person",
"mutual_friends": [
{
"name": "Mutual Friend 3"
},
{
"name": "Mutual Friend 4"
}
]
}
]