This question already has answers here:
How can I group data with an Angular filter?
(8 answers)
Closed 7 years ago.
I am trying to show a list using ng-repeat but I couldn't figure out how to group it. This is my json:
{
"id": "1",
"name": "Andre Nascimento",
"client": "Lojas Mais"
},
{
"id": "1",
"name": "Andre Nascimento",
"client": "Fe comercio"
},
{
"id": "1",
"name": "Andre Nascimento",
"client": "Transtour"
},
{
"id": "2",
"name": "Carla Prata",
"client": "Fe comercio"
},
{
"id": "2",
"name": "Carla Prata",
"client": "Transtour"
}
I would like to getthe follow result
Andre Nascimento
*Lojas Mais
*Fe comercio
*Transtour
Carla Prata
*Fe comercio
*Transtour
you can use angular.filter module as explained in this answer. Then you would have something like
<ul ng-repeat="(key, value) in yourArray| groupBy: 'client'">
Group name: {{ key }}
<li ng-repeat="element in value">
player: {{ element.name }}
</li>
</ul>
this should do it.
here there is a fiddle
Related
This question already has answers here:
What is the correct way to check for string equality in JavaScript?
(11 answers)
Closed 2 years ago.
I am trying to make a filtered array of objects. This is the original array:
const data = [{
"id": "80009841-C",
"name": "Giorgio Armani Code Homme Profumo Parfum",
"slug": "parfum/giorgio-armani/code-homme/giorgio-armani-code-homme-profumo-parfum.html",
"brand": "Giorgio Armani",
"type": "Parfum",
},
{
"id": "80022496-C",
"name": "Issey Miyake L'Eau Majeure D'Issey Eau de Toilette",
"slug": "parfum/issey-miyake/l-eau-majeure-d-issey/issey-miyake-l-eau-majeure-d-issey-eau-de-toilette.html",
"brand": "Issey Miyake",
"type": "Eau de Parfum",
}
]
I want to filter by type, using this code I found:
data.filter((product) => product.type.indexOf("Parfum") >= 0)
But I'm not getting what I want, the function is returning an array with both objects, because both have the word "Parfum" inside their "type" values.
Question How can I get an exact match for the values I'm trying to filter?
If exact match is what you want, then simply do this:
data.filter((product) => product.type === "Parfum");
const data = [{
"id": "80009841-C",
"name": "Giorgio Armani Code Homme Profumo Parfum",
"slug": "parfum/giorgio-armani/code-homme/giorgio-armani-code-homme-profumo-parfum.html",
"brand": "Giorgio Armani",
"type": "Parfum",
},
{
"id": "80022496-C",
"name": "Issey Miyake L'Eau Majeure D'Issey Eau de Toilette",
"slug": "parfum/issey-miyake/l-eau-majeure-d-issey/issey-miyake-l-eau-majeure-d-issey-eau-de-toilette.html",
"brand": "Issey Miyake",
"type": "Eau de Parfum",
}
];
const filtered = data.filter(item => item.type == "Parfum");
console.log(filtered);
Currently working on jQuery auto complete (multi column) where the value is coming from json with my current code I am getting the below error coming from jQuery UI.
Here is my JSON data I have validate this json with this json
{
"school": [
{
"id": "1",
"schoolname_heading" : "Emirates College of Technology- UAE",
"description": "COL000001"
},
{
"id": "2",
"schoolname_heading" : "Al Khawarizmi International College- UAE",
"description": "COL000002"
},
{
"id": "3",
"schoolname_heading" : "Syscoms College",
"description": "COL000003"
},
{
"id": "4",
"schoolname_heading": "Other 1",
"description": "Other"
}
]
}
Here is my jquery code in this fiddle link
With the current code i am getting the header as the value.
Any suggestion guys.
Thanks in advance
My question is looking similar to other questions. But it is different.
Please take a look of below code.
I want to filter data by an array of objects.
Here is the snippet
HTML
<div
ng-repeat="(key, value) in ledgerData.ledgers track by $index"
ledger-pop
index="$index"
ftype="ftypeUpdate"
itemdata="value"
acntlist="fltAccntList"
class='drEntryForm_{{$index}} pr'
name='drEntryForm_{{$index}}'
update-ledger="updateEntry(entry)"
novalidate
>
</div>
JS
$scope.ledgerDataata = {
"ForwardedBalance": {
"amount": 0,
"type": "CREDIT"
},
"creditTotal": 4008,
"debitTotal": 4008,
"balance": {
"amount": 4008,
"type": "CREDIT"
},
"ledgers": [
{
"transactions": [
{
"particular": {
"name": "Sarfaraz",
"uniqueName": "temp"
},
"amount": 1001,
"type": "DEBIT"
}
],
"description": "testing",
"tag": "testing"
},
{
"transactions": [
{
"particular": {
"name": "frnd",
"uniqueName": "frndafafaf14453422453110l26ow"
},
"amount": 2001,
"type": "CREDIT"
},
{
"particular": {
"name": "Rahul",
"uniqueName": "cake"
},
"amount": 3001,
"type": "DEBIT"
}
],
"description": "testing",
"tag": "testing",
}
]
}
I am trying to filter by
ng-repeat="(key, value) in ledgerData.ledgers track by $index | filter:{transactions[0]:{type: 'DEBIT'}}"
But am getting error
thanks in advance :-)
You need to write nested ng-repeat to solve this problem.
outer ng-repeat for the array ledgerData.ledgers and
inner ng-repeat for transaction array in ledgerData.ledgers
<div ng-repeat="(keyOne, ledger) in ledgerData.ledgers track by $index">
{{ledger.description}}
<div ng-repeat="(keyTwo, transaction) in ledger.transactions | filter:{type:'DEBIT'}">
{{transaction.type}}
</div>
</div>
Actually I got the solution.
I've googled hardly and got a library for angularjs-filter.
Here is the link it is very good plugin for filter dirty works and how to use it.
How I got success:
html
ng-repeat="(key, value) in ledgerData.ledgers | pick: debitOnly track by $index"
AngularJS
$scope.debitOnly = (ledger) ->
'DEBIT' == ledger.transactions[0].type
that's it.
This question already has an answer here:
Get length of a JavaScript array [duplicate]
(1 answer)
Closed 8 years ago.
I have the following data source -- converted to JSON using to XML using X2JS:
{
"blog": {
"article": [
{
"id": "1",
"author": "eat-sleep-code",
"title": {
"__cdata": "Thefirstarticle."
},
"content": {
"__cdata": "\nThisismyfirstarticleinmytestsite.\n"
},
"createdate": "2014-05-09"
},
{
"id": "2",
"author": "eat-sleep-code",
"title": {
"__cdata": "Thesecondarticle."
},
"content": {
"__cdata": "\nThisismysecondarticleinmytestsite.Thisarticle'screatedateisactuallyearlier.\n"
},
"createdate": "2014-05-08"
}
]
}
}
I am trying to find the number of "articles".
Object.keys(jsonObject).length; just gets me 1. I am guessing because it is finding one "blog" item.
jsonObject.blog.article.length
This question already has answers here:
Parse JSON in JavaScript? [duplicate]
(16 answers)
Closed 8 years ago.
I have this JSON array with a lot of person data every one with a type like "hr" or "accounting".
the JSON array looks like this:
{
"0": {
"id": "2",
"name": "blabla",
"type": "hr"
},
"1": {
"id": "3",
"name": "bub",
"type": "hr"
},
"2": {
"id": "4",
"name": "ula",
"type": "accounting"
},
"3": {
...
}
}
I want to display them in an ul like this:
<ul>
<li><p>hr</p>name: blabla<p></li>
<li><p>hr</p>name: bub<p></li>
<li><p>hr</p>......</li>
</ul>
<ul>
<li><p>accounting</p>name: ula<p></li>
<li><p>accounting</p>......</li>
</ul>
but i have no clue how to separate the JSON array or how to properly loop through it to display it like that.
Try this:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="container"></div>
<script>
var json={
"0": {
"id": "2",
"name": "blabla",
"type": "hr"
},
"1": {
"id": "3",
"name": "bub",
"type": "hr"
},
"2": {
"id": "4",
"name": "ula",
"type": "accounting"
}
};
var previous_type=json[0].type;
var _html="<ul>";
$.each(json, function(index,key) {
if (previous_type!=key.type) {
_html+="</ul><ul>";
}
previous_type=key.type;
_html+="<li><p>"+key.type+"</p><p>name: "+key.name+"</p></li>";
});
_html+="</ul>";
$('.container').html(_html);
</script>
</body>
</html>
It creates a new ul for every different type.
Output of container:
<div class="container">
<ul>
<li>
<p>hr</p>
<p>name: blabla</p>
</li>
<li>
<p>hr</p>
<p>name: bub</p>
</li>
</ul>
<ul>
<li>
<p>accounting</p>
<p>name: ula</p>
</li>
</ul>
</div>
this will basically do what you want for one department. You can use it for each department by putting an if in the each loop and checking it against value.type
var new_html = "<ul>";
$.each('name_of_json_array', function(key, value){
new_html+="<li><p>"+value.type+"</p><p>name: "+value.name+"</p></li>";
});
new_html+="</ul>";
$('#some_container_element').append(new_html);