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>
Related
I am having my json like that and i am trying to bind this in Html and convert into pdf using aspose.html but i am not able to bind readings data i.e; array of string . HTML code which i tried that i also pasting here please go through this also.
Now i am getting my result in pdf like this
Date 2/1/2022,2/2/2022,2/3/2022
Time 10AM,11AM,12PM
But i want my result in different column like
CL1 CL2 CL3
Date 2/1/2022 2/2/2022 2/3/2022
HTML:
<table class="poc_tbl" style="width:100%;margin-top:10px;" data_merge='{{#foreach data_pages}}'>
<tr>
<td>
<table class="poc_tbl" style="width:100%;margin-top:10px;" data_merge='{{#foreach data_readings}}'>
<tbody style="background-color: #f5fbfe;">
<tr>
<td style="width:30%";data_merge="{{#foreach data_readings}}">{{title}}</td>
<td>{{readings}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
JSON:
"data_pages": [
{
"data_readings": [
{
"title": "Date",
"readings": [ "2/1/2022", "2/2/2022", "2/3/2022" ]
},
{
"title": "Time",
"readings": [ "10AM", "11AM", "12PM" ]
},
{
"title": "Order",
"readings": [ "O1", "O2", "O3" ]
}
]
},
{
"data_readings": [
{
"title": "Date",
"readings": [ "3/1/2022", "3/2/2022", "3/3/2022" ]
},
{
"title": "Time",
"readings": [ "1AM", "2AM", "3aM" ]
},
{
"title": "Order",
"readings": [ "O11", "O12", "O13" ]
}
]
}
]
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>
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
Here is my json file.
{
"countries":[
{
"country": "India",
"cities" : [{
"name": "Bangalore",
"rank": "40"
},
{ "name": "Mumbai",
"rank": "32"
},
{ "name": "Kolkata",
"rank": "54"
},
{ "name": "Chennai",
"rank": "42"
}]
},
{ "country": "China",
"cities":[{"name": "Guangzhou",
"rank": "111"
},
{ "name": "Fuzhou",
"rank": "21"
},
{ "name": "Beijing",
"rank": "90"
},
{ "name": "Baotou",
"rank": "23"
}]
}
]}
I want to show all the name and rank of all the cities in the html table,
but I am unable to do this.
Angular js code is:
app.controller('cityCtrl1', function($scope, $http){
$http.get("http://localhost:8080/Angular%20Examples/angularCountries/app/json/countriesToCities1.json").success(function(data){
$scope.cities = data.countries;
});
});
Html code is:
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>
Might be I could change the code in controller file for getting the data, but not sure that will work or not.
First thing div inside a tr is not allowed(not working also) - Check this <div> into a <tr>: is it correct?
So I have change format -
<ul class="table" ng-repeat="country in cities.countries">
<li class="city-row" ng-repeat="city in country.cities">
<span class="city-name">{{city.name}}</span>
<span class="city-count">{{city.rank}}</span>
</li>
</ul>
I have created working example - http://plnkr.co/edit/1GTqNPcfigd9XRaAy0vg
Apply your own CSS to display it in table format.
what you are trying to do is,to refer city.states but where as states is not an object of json..change it to city.cities
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>
I have a JSON file and I want to display it in my HTML. But I dont know how to use the syntax for deeply nested objects.
{
"questions": [
{
"question": "Qw1",
"answers": [
{
"answers": "An1",
"value": 25
},
{
"answers": "An2",
"value": 50
},
{
"answers": "An3",
"value": 75
},
{
"answers": "An4",
"value": 100
}
]
},
{
"question": "Qw2",
"answers": [
{
"answers": "An1",
"value": 25
},
{
"answers": "An2",
"value": 50
},
{
"answers": "An3",
"value": 75
},
{
"answers": "An4",
"value": 100
}
]
}
]
}
I am not trying to use ng-repeat, as I need to access them them one by one.
<div class="main-content" ng-controller="QuestionCtrl">
<div id="Content1">
<h1>Question 1</h1>
<p>{{questions.question[1].answer}}</p>
...........
Ofcourse it doesn't work. How do I acces my information?
There is a working plunker
Using this controller:
.controller('QuestionCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.questions = [];
$http
.get("data.json")
.then(function(response){
$scope.questions = response.data.questions;
});
}])
which is loading your data, we can use this
<div class="main-content" ng-controller="QuestionCtrl">
<div id="Content1">
<h1>Question 1</h1>
<p>{{questions[0].question}}</p>
<p>{{questions[0].answers[0]}}</p>
<p>{{questions[0].answers[1]}}</p>
</div>
</div>
Or we can use it like this:
<h1>Question 1</h1>
<p>{{questions[0].question}}</p>
<h2>answer 1</h2>
<p>{{questions[0].answers[0].value}}</p>
<p>{{questions[0].answers[0].answers}}</p>
<h2>answer 2</h2>
<p>{{questions[0].answers[1].value}}</p>
<p>{{questions[0].answers[1].answers}}</p>
which will show the numeric value and answers text
Check it here in action
<div class="main-content" *ngFor="let q of questions">
<h1> {{q.question}}</h1>
<p *ngFor="let ans of q.answers">{{ans.answers}} = {{ans.value}} </p>
</div>
questions is the array, not questions.question, and your JSON does not contain answer properties. Did you try using the correct traversal?
questions[0].answers[0].value
should get you 25.