how to display select option in loop using antd and react js - javascript

how to make select option in loop using antd and reacts js that show the option based on selected option before, example : second options are based on first selected option and ect.
i want to show loop select option.
the data like this
{
"0": {
"user_id": 2,
"referal": 0,
"parent_id": 2,
"name": "Bupati Bandung Barat",
"level": 1,
"unit": "Kantor Bupati",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:45:35",
"deskripsi": null,
"paket": "Architecto laudantium et.",
"deskripsi_paket": "Eveniet similique aut expedita sed voluptatibus cumque voluptas blanditiis sint occaecati reiciendis fugiat vitae velit architecto cum ipsa.",
"child": [
{
"1": {
"user_id": 3,
"referal": 2,
"parent_id": 2,
"name": "DPPAPP Bandung Barat",
"level": 2,
"unit": "Kantor DPPAPP",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:46:20",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
{
"5": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
},
"6": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
},
"7": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
}
}
]
},
"2": {
"user_id": 5,
"referal": 2,
"parent_id": 2,
"name": "DINSOS Bandung Barat",
"level": 2,
"unit": "DINSOS Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:50:45",
"deskripsi": null,
"paket": "Rerum culpa.",
"deskripsi_paket": "Rerum inventore possimus qui voluptates dolorem rerum possimus magni qui aperiam hic et voluptatem labore quisquam qui aliquid rerum ullam.",
"child": [
[]
]
},
"3": {
"user_id": 3,
"referal": 2,
"parent_id": 2,
"name": "DPPAPP Bandung Barat",
"level": 2,
"unit": "Kantor DPPAPP",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:46:20",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
{
"5": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
},
"6": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
},
"7": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
}
}
]
},
"4": {
"user_id": 5,
"referal": 2,
"parent_id": 2,
"name": "DINSOS Bandung Barat",
"level": 2,
"unit": "DINSOS Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:50:45",
"deskripsi": null,
"paket": "Rerum culpa.",
"deskripsi_paket": "Rerum inventore possimus qui voluptates dolorem rerum possimus magni qui aperiam hic et voluptatem labore quisquam qui aliquid rerum ullam.",
"child": [
[]
]
}
}
]
},
"8": {
"user_id": 7,
"referal": 0,
"parent_id": 7,
"name": "Bupati Vrindafan",
"level": 1,
"unit": "Kabupaten",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG",
"order_date": "2023-02-08 11:07:57",
"deskripsi": null,
"paket": null,
"deskripsi_paket": null,
"child": [
[]
]
}
}

Related

How to store id's of different objects in below mentioned JSON Response in an Array

[
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo#gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "Jayne_Kuhic#sydney.com",
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "Nikita#garfield.biz",
"body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
},
{
"postId": 1,
"id": 4,
"name": "alias odio sit",
"email": "Lew#alysha.tv",
"body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
},
{
"postId": 1,
"id": 5,
"name": "vero eaque aliquid doloribus et culpa",
"email": "Hayden#althea.biz",
"body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
}
]
[
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo#gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "Jayne_Kuhic#sydney.com",
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "Nikita#garfield.biz",
"body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
},
{
"postId": 1,
"id": 4,
"name": "alias odio sit",
"email": "Lew#alysha.tv",
"body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
},
{
"postId": 1,
"id": 5,
"name": "vero eaque aliquid doloribus et culpa",
"email": "Hayden#althea.biz",
"body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
}
]
Please try this.
let ar = [
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo#gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "Jayne_Kuhic#sydney.com",
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "Nikita#garfield.biz",
"body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
},
{
"postId": 1,
"id": 4,
"name": "alias odio sit",
"email": "Lew#alysha.tv",
"body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
},
{
"postId": 1,
"id": 5,
"name": "vero eaque aliquid doloribus et culpa",
"email": "Hayden#althea.biz",
"body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
}
]
res = ar.map(elem => elem.id)
console.log(res);
You can use Array#map with destructuring.
const res = arr.map(({id})=>id);
const arr = [
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo#gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "Jayne_Kuhic#sydney.com",
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "Nikita#garfield.biz",
"body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
},
{
"postId": 1,
"id": 4,
"name": "alias odio sit",
"email": "Lew#alysha.tv",
"body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
},
{
"postId": 1,
"id": 5,
"name": "vero eaque aliquid doloribus et culpa",
"email": "Hayden#althea.biz",
"body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
}
];
const res = arr.map(({id})=>id);
console.log(res);

Accessing Javascript nested object returned by Laravel

For some reasons I can not access name from category object it says undefined
datas: [{
"id": 3,
"title": "public",
"created_at": "2019-01-12 02:37:28",
"updated_at": "2019-01-12 02:37:28",
"announcements": [{
"id": 3,
"user_id": 37,
"title": "Jumapili 13-01-2019",
"category_id": 13,
"body": "Saa 1030 asubuhi Consequuntur autem veniam ut voluptatibus. Qui impedit et ipsam est veritatis dolores. Voluptate quos harum eos nisi aut. Officiis nemo occaecati voluptas id modi. Sit omnis est autem aliquam sint quam libero.",
"end_date": "2019-01-12 02:56:15",
"live": 0,
"created_at": "2019-01-12 02:36:15",
"updated_at": "2019-01-12 02:36:15",
"pivot": {"viewer_id": 3, "viewable_id": 3, "viewable_type": "App\\Announcement"},
"category": {
"id": 13,
"user_id": 38,
"name": "et",
"created_at": "2019-01-12 02:36:15",
"updated_at": "2019-01-12 02:36:15"
}
}]
}]
when I try to access it on the Vue component I get undefined
div class="public" v-for="dataSet in datas">
<div v-for="announcements in dataSet">
<dl v-for="announcement in announcements">
<dt class="category"
v-text="announcement.category"></dt>
<h3 v-text="announcement.title"></h3>
<dd v-text="announcement.body"></dd>
</dl>
</div>
</div>
Please help, thanks in advance
You need to declare the vue component in this way:
var app = new Vue({
el: '#app', //the id of tour html
data: {
datas: [{
"id": 3,
"title": "public",
"created_at": "2019-01-12 02:37:28",
"updated_at": "2019-01-12 02:37:28",
"announcements": [{
"id": 3,
"user_id": 37,
"title": "Jumapili 13-01-2019",
"category_id": 13,
"body": "Saa 1030 asubuhi Consequuntur autem veniam ut voluptatibus. Qui impedit et ipsam est veritatis dolores. Voluptate quos harum eos nisi aut. Officiis nemo occaecati voluptas id modi. Sit omnis est autem aliquam sint quam libero.",
"end_date": "2019-01-12 02:56:15",
"live": 0,
"created_at": "2019-01-12 02:36:15",
"updated_at": "2019-01-12 02:36:15",
"pivot": {"viewer_id": 3, "viewable_id": 3, "viewable_type": "App\\Announcement"},
"category": {
"id": 13,
"user_id": 38,
"name": "et",
"created_at": "2019-01-12 02:36:15",
"updated_at": "2019-01-12 02:36:15"
}
}]
}]
}
})

AngularJS and parsing json with {status code 200..}

I have been trying to research this issue for a couple days now. Finally I have to ask.
I am trying to parse a json api that looks like this with Angular JS:
{
"status_code": 200,
"message": "success",
"data": [
{
"id": 2,
"title": "Rerum provident quisquam iste.",
"description": "Cumque quidem dolore nulla nostrum ipsa voluptas voluptatem. Tenetur rem maxime necessitatibus numquam quia minus ducimus quia. Reiciendis deserunt quis nihil omnis.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
},
{
"id": 3,
"title": "Nemo inventore voluptas quo cumque quod.",
"description": "Pariatur ipsam in velit officia et odit. Voluptatem consequatur recusandae voluptatum sint soluta praesentium incidunt magni.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
},
For the life of me I can't figure out how to do this. All I need is the data [array}.
I can parse this one just fine. When the array is in a property I can't find seem to get it to work with any of the documentation I find. I am sure I probably have gotten close but I am missing something. Also examples would be greatly appreciated.
[
{
"id": 2,
"title": "Rerum provident quisquam iste.",
"description": "Cumque quidem dolore nulla nostrum ipsa voluptas voluptatem. Tenetur rem maxime necessitatibus numquam quia minus ducimus quia. Reiciendis deserunt quis nihil omnis.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
},
{
"id": 3,
"title": "Nemo inventore voluptas quo cumque quod.",
"description": "Pariatur ipsam in velit officia et odit. Voluptatem consequatur recusandae voluptatum sint soluta praesentium incidunt magni.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
},
REVISION FOR CLARITY This is what I am currently doing.
HTML This is inside my ng-app of course and works with the standard array json.
<tr ng-repeat="survey in surveys">
<td width="100">Survey #{{survey.id}}</td>
<td>{{survey.title}}</td>
<td>{{survey.description}}</td>
<td>{{survey.created_at}}</td>
Angular JS
var app = angular.module('myApp', []);
app.controller('newsController', function($scope, $http){
$scope.sortType = 'id'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchSurvey = ''; // set the default search/filter term
$http({method: 'GET', url: 'http://localhost:8080/survey/api'}).success(function(data)
{
$scope.surveys = data; // response data
});
});
This is not working with the json that oupts "{"status_code": 200, ...}"
I guess you are not accessing the right node of the array, try this
var app = angular.module('myApp', []);
app.controller('newsController', function($scope, $http){
$scope.sortType = 'id'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchSurvey = ''; // set the default search/filter term
$http({method: 'GET', url: 'http://localhost:8080/survey/api'}).success(function(response)
{
$scope.surveys = response.data; // response data
});
});
This should work fine.
I am not sure how Angular JS differes from normal JS but this is how you can save this in JavaScript (just to give a working example).
Note: There was 1 major issue with the original JSON; you ended it with a comma (,) instead of adding the needed ]} to end the JSON.
var name_me = {
"status_code": 200,
"message": "success",
"data": [{
"id": 2,
"title": "Rerum provident quisquam iste.",
"description": "Cumque quidem dolore nulla nostrum ipsa voluptas voluptatem. Tenetur rem maxime necessitatibus numquam quia minus ducimus quia. Reiciendis deserunt quis nihil omnis.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
}, {
"id": 3,
"title": "Nemo inventore voluptas quo cumque quod.",
"description": "Pariatur ipsam in velit officia et odit. Voluptatem consequatur recusandae voluptatum sint soluta praesentium incidunt magni.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
}]
};
I hope this answered your question :)

Finding the three top tags

This is going to be a bit lengthy, but I'm looking for help as to how to tackle/think through this. I want to get into the habit of thinking critically with this problem, but I've hit a wall. So any tricks/tips/advice are appreciated.
So I have an array of multiple objects like so (one of 8):
[{
"_id": "555e4125afb26872ac1cb814",
"index": 0,
"guid": "e7bd5b56-43d3-41cb-9742-aee4408a36c2",
"isActive": false,
"balance": "$3,868.37",
"picture": "http://placehold.it/32x32",
"age": 37,
"eyeColor": "brown",
"name": "Adele Mullen",
"gender": "female",
"company": "GAPTEC",
"email": "adelemullen#gaptec.com",
"phone": "+1 (860) 572-3603",
"address": "775 Tapscott Street, Mammoth, South Dakota, 9956",
"about": "Aliqua duis ex id excepteur duis aute non ipsum laborum. Duis exercitation aliquip sint irure consectetur ex enim veniam irure aliquip ipsum dolore cillum sunt. Ea dolor magna cupidatat sint laboris ipsum. Cillum quis nisi laboris officia consequat nulla dolor adipisicing eu. Quis ut nostrud non aliqua.\r\n",
"registered": "2014-05-12T22:50:11 +05:00",
"latitude": 30.620088,
"longitude": -156.753814,
"tags": ["cupidatat", "do", "irure", "proident", "sit", "nulla", "aute"],
"friends": [{
"id": 0,
"name": "Justice Lara"
}, {
"id": 1,
"name": "Duke Patrick"
}, {
"id": 2,
"name": "Herring Hull"
}, {
"id": 3,
"name": "Johnnie Berg"
}],
"greeting": "Hello, Adele Mullen! You have 8 unread messages.",
"favoriteFruit": "banana"
}
My goal is to create a function finding the three most common tags among all object's associated tags. My input and output will be an array, and I have recreated three HOF to work with objects to assist me in this process:
recreation of reduce:
function reduce(array, func, seed) {
var theArray = array;
var previousResult;
var i = 0;
if (seed !== null && seed !== undefined) {
previousResult = seed;
} else {
previousResult = array[0];
theArray = array.slice(1, array.length);
i =1;
}
each(theArray, function(value, index, collection) {
previousResult = func(previousResult, value, index + i);
});
return previousResult;
recreation of map:
function map (collection, func) {
var newArray = [];
each(collection, function(value, index, collection) {
newArray.push(func(value,index, collection));
});
return newArray;
}
recreation of filter
function filter (collection, test) {
const filtered = [];
each(collection, function(value, position, collection) {
if (test(value,position, collection))
filtered.push(value);
});
return filtered;
}
My main issues is how to advance with this problem given that I am most likely going to use these functions in a chain function reaction.
var topThreeTags = function(customers) {
var topThree = [];
var allTags = [];
_.map(customers, func(customer.tags) {
topThree.push(customer.tags);
}
_.filter(allTags, function(value, curr, collection) {
if (test(value.tags === curr[tag])) {
topThree.push(curr);
}
}
};
return topThree;
};
I know this is incomplete code, but I've hit a road block and I want to get some clarity of where did I detour wrong and what I need to to to fix it.
Try this approach
Map the tags with count of their usage
i.e.
var tagMap = {};
arr.forEach( function( item ){
item.tags.forEach( function( tag ){
tagMap[ tag ] = ( tagMap[ tag ] || 0 ) + 1;
})
});
Explanation
== Iterate all objects in the array arr
== For every item in the object, iterate its tags.
== For every tag in the tags' array initialize its count to 0 (if it doesn't exist in the map) and increment the same.
After this step, you will have a map
map = {
"tag1" : 2, //2 is the count value
"tag3" : 3
}
Convert to Array of tags
Sort in the ascending order of count of occurrences
var sortedArr = Object.keys( tagMap ).map( s => [ s , tagMap[s] ] ).sort( (a,b) => a[1] - b[1] );
Explanation
== Get all keys of map in an array using Object.keys(map)
== Map all the keys into another array such that each item is [ tag, count ]
== Sort this array by count value
After this step, you will have a sorted array such as
sortedArr = [
[ "tag3" , 3 ],
[ "tag4" , 2 ],
[ "tag2" , 2 ],
[ "tag1" , 1 ],
]
Slice the top three values
i.e.
var output = sortedArr.slice(-3);
Demo
var customers = [{
"_id": "555e4125afb26872ac1cb814",
"index": 0,
"guid": "e7bd5b56-43d3-41cb-9742-aee4408a36c2",
"isActive": false,
"balance": "$3,868.37",
"picture": "http://placehold.it/32x32",
"age": 37,
"eyeColor": "brown",
"name": "Adele Mullen",
"gender": "female",
"company": "GAPTEC",
"email": "adelemullen#gaptec.com",
"phone": "+1 (860) 572-3603",
"address": "775 Tapscott Street, Mammoth, South Dakota, 9956",
"about": "Aliqua duis ex id excepteur duis aute non ipsum laborum. Duis exercitation aliquip sint irure consectetur ex enim veniam irure aliquip ipsum dolore cillum sunt. Ea dolor magna cupidatat sint laboris ipsum. Cillum quis nisi laboris officia consequat nulla dolor adipisicing eu. Quis ut nostrud non aliqua.\r\n",
"registered": "2014-05-12T22:50:11 +05:00",
"latitude": 30.620088,
"longitude": -156.753814,
"tags": ["cupidatat", "do", "irure", "proident", "sit", "nulla", "aute"],
"friends": [{
"id": 0,
"name": "Justice Lara"
}, {
"id": 1,
"name": "Duke Patrick"
}, {
"id": 2,
"name": "Herring Hull"
}, {
"id": 3,
"name": "Johnnie Berg"
}],
"greeting": "Hello, Adele Mullen! You have 8 unread messages.",
"favoriteFruit": "banana"
}, {
"_id": "555e4125030944f697e16ab7",
"index": 1,
"guid": "eb2bd6bb-d032-4ec1-9e45-8d34535f8cf4",
"isActive": true,
"balance": "$3,690.70",
"picture": "http://placehold.it/32x32",
"age": 26,
"eyeColor": "green",
"name": "Olga Newton",
"gender": "female",
"company": "INTERGEEK",
"email": "olganewton#intergeek.com",
"phone": "+1 (856) 522-3065",
"address": "428 Division Avenue, Morriston, Illinois, 5540",
"about": "Incididunt cupidatat incididunt aliquip ea voluptate nisi Lorem. Consectetur consectetur sunt laborum ad sit pariatur velit pariatur quis. Quis veniam ex eiusmod aute ex cupidatat id sunt. Eiusmod minim enim sit duis ipsum enim culpa id eu dolore consectetur. Laborum ex magna deserunt ullamco cillum nisi culpa dolore ullamco incididunt ut. Non incididunt culpa pariatur id deserunt deserunt amet excepteur consectetur nostrud. Elit sint sit reprehenderit minim ex id anim et nulla cupidatat ex.\r\n",
"registered": "2014-11-24T23:10:56 +06:00",
"latitude": -36.350505,
"longitude": -173.287501,
"tags": ["voluptate", "non", "amet", "do", "occaecat", "commodo", "in"],
"friends": [{
"id": 0,
"name": "Cross Barnett"
}, {
"id": 1,
"name": "Raquel Haney"
}, {
"id": 2,
"name": "Cassandra Martin"
}, {
"id": 3,
"name": "Shelly Walton"
}],
"greeting": "Hello, Olga Newton! You have 7 unread messages.",
"favoriteFruit": "strawberry"
}, {
"_id": "555e41251beb2fc79cbafff7",
"index": 2,
"guid": "3bfda455-d93f-4e70-9632-21504df89ede",
"isActive": true,
"balance": "$1,005.44",
"picture": "http://placehold.it/32x32",
"age": 35,
"eyeColor": "blue",
"name": "Shelly Walton",
"gender": "female",
"company": "TYPHONICA",
"email": "shellywalton#typhonica.com",
"phone": "+1 (806) 578-2712",
"address": "934 Elm Avenue, Sidman, Utah, 1267",
"about": "Irure labore ut officia veniam ad tempor labore. Eu ullamco elit magna veniam. Deserunt excepteur ullamco eiusmod nisi magna dolor sint minim occaecat. Consequat dolore consequat culpa excepteur non Lorem ut. Occaecat excepteur eiusmod dolor labore.\r\n",
"registered": "2014-11-15T07:22:23 +06:00",
"latitude": 70.637542,
"longitude": 38.023956,
"tags": ["laborum", "esse", "occaecat", "id", "ea", "non"],
"friends": [{
"id": 0,
"name": "Cheryl Kent"
}, {
"id": 1,
"name": "Greta Wells"
}, {
"id": 2,
"name": "Gutierrez Waters"
}, {
"id": 3,
"name": "Cooley Jimenez"
}],
"greeting": "Hello, Shelly Walton! You have 3 unread messages.",
"favoriteFruit": "banana"
}, {
"_id": "555e41253d951ad8d2d27b50",
"index": 3,
"guid": "ee28c73c-5692-4dba-96ba-3b695eb7122a",
"isActive": true,
"balance": "$2,491.36",
"picture": "http://placehold.it/32x32",
"age": 24,
"eyeColor": "blue",
"name": "Serena Odonnell",
"gender": "female",
"company": "ECOLIGHT",
"email": "serenaodonnell#ecolight.com",
"phone": "+1 (844) 559-3964",
"address": "375 Beaver Street, Garfield, Maryland, 8966",
"about": "Eu labore dolor ea reprehenderit duis laboris minim voluptate exercitation magna velit sunt. Proident adipisicing enim ut cupidatat. Irure ut tempor ea officia labore aliqua sint labore ipsum adipisicing magna aute. Deserunt voluptate aute minim ea nulla duis mollit anim.\r\n",
"registered": "2014-12-03T08:18:32 +06:00",
"latitude": 86.286967,
"longitude": -98.561972,
"tags": ["sint", "Lorem", "aliqua", "magna", "exercitation", "labore", "eu"],
"friends": [{
"id": 0,
"name": "Deborah Carr"
}, {
"id": 1,
"name": "Stein Simpson"
}, {
"id": 2,
"name": "Stefanie Leblanc"
}, {
"id": 3,
"name": "Tsing Tao"
}],
"greeting": "Hello, Serena Odonnell! You have 1 unread messages.",
"favoriteFruit": "apple"
}, {
"_id": "555e412508a72c3ba3cdf538",
"index": 4,
"guid": "a08d2523-bf5a-4c5e-8f53-dd8cbba5c505",
"isActive": false,
"balance": "$2,631.16",
"picture": "http://placehold.it/32x32",
"age": 25,
"eyeColor": "brown",
"name": "Morrison Strong",
"gender": "male",
"company": "COMTOURS",
"email": "morrisonstrong#comtours.com",
"phone": "+1 (855) 574-2926",
"address": "555 Bowery Street, Foxworth, Virginia, 4758",
"about": "Sunt proident exercitation anim eiusmod amet deserunt dolor sunt. Ipsum dolor anim do ut quis dolore nisi eiusmod. Laborum dolor consequat irure consectetur deserunt aliquip occaecat esse sunt pariatur consectetur. Elit sint consequat fugiat sint ad fugiat mollit. Nostrud do non veniam nisi veniam fugiat dolor anim adipisicing.\r\n",
"registered": "2014-07-30T06:36:56 +05:00",
"latitude": 75.061884,
"longitude": 93.11415,
"tags": ["fugiat", "magna", "ea", "sunt", "minim", "excepteur", "nisi"],
"friends": [{
"id": 0,
"name": "Laurel Stanton"
}, {
"id": 1,
"name": "Tricia Salinas"
}, {
"id": 2,
"name": "Roxanne Day"
}, {
"id": 3,
"name": "Cooley Jimenez"
}],
"greeting": "Hello, Morrison Strong! You have 7 unread messages.",
"favoriteFruit": "apple"
}, {
"_id": "555e4125970ae2387fab74ed",
"index": 5,
"guid": "990062ff-ab4f-4c3b-aad4-dbca366c22de",
"isActive": true,
"balance": "$1,527.76",
"picture": "http://placehold.it/32x32",
"age": 40,
"eyeColor": "green",
"name": "Buckner Kennedy",
"gender": "male",
"company": "SHEPARD",
"email": "bucknerkennedy#shepard.com",
"phone": "+1 (800) 524-3139",
"address": "234 Kings Place, Darbydale, Wyoming, 8190",
"about": "Cupidatat cupidatat commodo ut qui velit labore ea esse irure quis esse. Proident eu tempor amet proident amet consequat minim elit et tempor. Exercitation dolore aute nulla velit veniam qui eu. Tempor mollit elit magna cupidatat eu velit id consequat sint dolor qui. Nisi minim duis anim minim nulla in voluptate ea anim sit nostrud. Tempor commodo Lorem tempor aliqua est sint aliqua eu.\r\n",
"registered": "2015-04-19T06:59:09 +05:00",
"latitude": -89.386174,
"longitude": 39.015288,
"tags": ["sit", "sunt", "minim", "veniam", "cillum", "nisi", "enim"],
"friends": [{
"id": 0,
"name": "Cooley Jimenez"
}, {
"id": 1,
"name": "Mooney Hinton"
}, {
"id": 2,
"name": "Stacy Ross"
}, {
"id": 3,
"name": "Doyle Erickson"
}],
"greeting": "Hello, Buckner Kennedy! You have 8 unread messages.",
"favoriteFruit": "banana"
}, {
"_id": "555e4125ff554bdf2d6f080c",
"index": 6,
"guid": "2b5ad6ce-4a9b-4ec1-b869-cf0cac7c4d21",
"isActive": false,
"balance": "$1,453.63",
"picture": "http://placehold.it/32x32",
"age": 22,
"eyeColor": "green",
"name": "Doyle Erickson",
"gender": "male",
"company": "BLEENDOT",
"email": "doyleerickson#bleendot.com",
"phone": "+1 (976) 432-3644",
"address": "182 Rockwell Place, Goldfield, Indiana, 8753",
"about": "Veniam sunt amet amet dolor nostrud voluptate Lorem culpa est reprehenderit. Officia Lorem Lorem ut sit duis eu voluptate. Culpa aliqua sint in eiusmod. Duis incididunt sint velit ex ut excepteur. Deserunt nulla adipisicing minim minim cillum deserunt do tempor. Laboris nostrud cillum ea proident laboris do incididunt laborum. Eiusmod qui qui nulla velit do fugiat.\r\n",
"registered": "2015-03-05T19:47:37 +06:00",
"latitude": 72.253186,
"longitude": -23.777045,
"tags": ["dolore", "Lorem", "velit", "pariatur", "aliqua", "veniam"],
"friends": [{
"id": 0,
"name": "Torres Nguyen"
}, {
"id": 1,
"name": "Francine Melendez"
}, {
"id": 2,
"name": "Johnnie Berg"
}, {
"id": 3,
"name": "Olga Newton"
}],
"greeting": "Hello, Doyle Erickson! You have 10 unread messages.",
"favoriteFruit": "banana"
}, {
"_id": "123e4125ff554bdf2d6f080c",
"index": 7,
"guid": "5c5ad6ce-4a9b-4ec1-b869-cf0cac7c4d21",
"isActive": true,
"balance": "$1,253.63",
"picture": "http://placehold.it/32x32",
"age": 22,
"eyeColor": "green",
"name": "Doris Smith",
"gender": "transgender",
"company": "BLEENDOT",
"email": "dorissmith#bleendot.com",
"phone": "+1 (976) 432-3644",
"address": "182 Rockwell Place, Goldfield, Indiana, 8753",
"about": "Veniam sunt amet amet dolor nostrud voluptate Lorem culpa est reprehenderit. Officia Lorem Lorem ut sit duis eu voluptate. Culpa aliqua sint in eiusmod. Duis incididunt sint velit ex ut excepteur. Deserunt nulla adipisicing minim minim cillum deserunt do tempor. Laboris nostrud cillum ea proident laboris do incididunt laborum. Eiusmod qui qui nulla velit do fugiat.\r\n",
"registered": "2015-03-05T19:47:37 +06:00",
"latitude": 72.253186,
"longitude": -23.777045,
"tags": ["dolore", "Lorem", "velit", "pariatur", "aliqua", "veniam", "aute"],
"friends": [{
"id": 0,
"name": "Buckner Kennedy"
}, {
"id": 1,
"name": "Francine Melendez"
}, {
"id": 2,
"name": "Johnnie Berg"
}, {
"id": 3,
"name": "Olga Newton"
}],
"greeting": "Hello, Doris Smith! You have 10 unread messages.",
"favoriteFruit": "banana"
}];
var topThreeTags = function(customers) {
var output = [];
var tagMap = {};
customers.forEach(function(customer) {
customer.tags.forEach(function(tag) {
tagMap[tag] = (tagMap[tag] || 0) + 1;
});
});
var sortedArr = Object.keys(tagMap).map(s => [s, tagMap[s]]).sort((a, b) => a[1] - b[1]);
output = sortedArr.slice(-3);
return output;
};
console.log(topThreeTags(customers));

How to loop through an array of objects and nested object in vue 2

I have an array that contains lots of objects and nested objects. I want to loop through the array using v-for in vue 2 app.
Here is what I get if I print the complete array
[
[
{
"id": 1,
"title": "Dolor assumenda officiis.",
"joke": "Esse quia non voluptas facere odio id. Aut animi vero qui corporis alias. Sunt omnis qui sunt est officia.",
"created_at": "Jun 22, 2017",
"creator": {
"data": {
"id": 1,
"name": "Dr. Sage Braun I",
"email": "theller#example.com",
"joined": "Jun 22, 2017"
}
}
},
{
"id": 2,
"title": "Quod occaecati doloribus amet voluptatem.",
"joke": "Voluptas nam harum voluptatem ipsam tempora rerum. Sunt quis nam debitis. Voluptatibus id dolor quia aut odio. Omnis saepe harum quibusdam in dolorem. Possimus voluptatem impedit sed inventore fugit omnis culpa.",
"created_at": "Jun 22, 2017",
"creator": {
"data": {
"id": 1,
"name": "Dr. Sage Braun I",
"email": "theller#example.com",
"joined": "Jun 22, 2017"
}
}
}
]
]
This is how I am trying to get the data but it does not load anything
<div class="row" v-for="u in users" >
{{ u.id}}
</div>
You seem to have a nested array. Try
<div class="row" v-for="u in users[0]" >
{{ u.id}}
</div>

Categories