Fix a dropdown filter - javascript

I've been trying since this weekend implement this but no success so far.
I have a dropdown that should display items available on every event.
"id": "80773bce-7baf-49ae-8e65-328064a97116",
"title": "Sed sit qui enim corrupti magni at et voluptatum atque.",
"address": "69706 Lester Drive, Bedfordshire, Wilmington",
"guests": 70,
"budget": "65947.00",
"created_at": "2022-03-21T21:37:27.700+00:00",
"updated_at": "2022-03-21T21:37:27.700+00:00",
"is_public": false,
"description": "Fuga illo amet. Nihil omnis quae inventore repudiandae iure excepturi. Sunt necessitatibus harum culpa aliquid asperiores tenetur. Rem doloribus minus beatae officiis. Reprehenderit iure consequatur ea voluptates itaque voluptate vel dolorem reiciendis. Illo omnis et.\n \rDicta magnam et architecto ex cumque. Fugiat velit ullam deserunt perferendis consequuntur libero excepturi illum aspernatur. Quo iure libero vitae voluptatem aliquid qui dolores perspiciatis. Sed libero iusto ea odit incidunt iste libero.",
"event_date": "2022-03-21",
"start_hour": "2022-03-21T10:26:06.000Z",
"end_hour": "2022-03-21T10:26:06.000Z",
"landmark": "-11.9522,179.1757",
"location": "Laudantium veritatis animi ut quo est dolor inventore voluptate iure.",
"customer": null,
"eventType": null,
"items": [
{
"id": "70d32cee-a0fc-458a-b3e0-1bd0dbd4fdb5",
"title": "Sunt et unde eaque.",
"description": "Aut fugit voluptas explicabo animi. Illum reiciendis saepe minima dolore saepe pariatur omnis et et. Qui ratione rerum voluptatem voluptatem natus voluptatem eligendi. Iure sint et quae cumque sit neque. Similique magnam reprehenderit.",
"order": 97,
"enabled": true,
"created_at": "2022-03-21T21:37:27.702+00:00",
"updated_at": "2022-03-21T21:37:27.702+00:00"
}
],
"county": null
},
This should be the return from API.
Data is an array of objects and I must display all it's items under "eventType" line.
When I display it I must select one option and then should return only events that has that item on it's service.
So far, what I did was:
const mappedEventsData = eventsData.map((item) => {
return item.items[0];
});
And I succesfully rendered those . Then I passed it's title or id as paramater and my state is ok with that.
When I try to filter it however I cannot do it. I tried to console.log
useEffect(() => {
getData();
getEventsData();
console.log(mappedEventsData.includes(searchByTitle));
}, [searchByTitle]);
{mappedEventsData
.filter((item) => {
if (!item) return false;
return item.title.toLowerCase();
})
// .filter((item, index) => index < 3)
?.map((item) => {
return (
<option onClick={() => handleChangeSearchByEvents(item.id)} key={item.id}>
{item.title}
</option>
);
})}
and it always returns false.
How can I fix it and make it work?

Related

Logic for reconstruction of json data

Hope you are doing well.
[ {
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 2,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 3,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
]
Considering there are multiple objects for each userId and I want to group them together in the below format.
const json2 = {
1: [{},{},{}],
2:[{},{},{}],
3:[{},{},{}],
}
Any help will be appreciated.
Thanks in Advance
You can do it using the reduce function, but next time please provide what you tried before asking.
const input = [{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 2,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 3,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
];
const output = input.reduce((acc, el) => {
acc[el.userId]??=[];
acc[el.userId].push(el);
return acc;
}, {})
console.log(output);

How access specific property for each object in list

I made a list (j_list) contain some post. I want a way to access on each body property present on the list.
My goal is find if a specific word exist on body property string.
const j_list =[
const post = {
"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"
},
const post = {
"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"
},
const post = {
"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"
}
]
I try this on my code :
for (post in j_list){
if(post.body.includes("quasi") > -1){
console.log("This post contain that word")
} else {
console.log("This post doesn't contain any search word")
}
You are defining the array in a wrong way. Each element should be separated via a , without const post.
const j_list = [
{
"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"
}
];
for (const post of j_list){
if(post.body.includes("quasi") > -1){
console.log("This post contain that word")
} else {
console.log("This post doesn't contain any search word")
}
}
Change your declaration to an array of objects, then access those objects in a loop; Example:
const j_list = [{
"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"
}
];
// string includes returns a boolean
j_list.forEach(function(postel, index) {
// console.log(postel, postel.body);
if (postel.body.includes("quasi")) {
console.log("This post contain that word")
} else {
console.log("This post doesn't contain any search word")
}
});

Fetch multiple posts from JSON Placeholder with one API call

So, my question is, can you fetch multiple posts from JSON Placeholder API, but call fetch once, and fetch 12 posts for example. This is what I did so far, but when I go into network in inspect element, I get 12 API calls, and I want it to be 1 if it is possible
const fetchPosts = (id) => {
fetch("https://jsonplaceholder.typicode.com/posts/" + id)
.then(function (response) {
return response.json();
})
.then((json) => {
var result = document.querySelector(".wrapper");
result.innerHTML += "<div class=\"posts\">" + json.title + "</div>";
});
};
for(let i = 0; i <= 12; i++) {
fetchPosts(i);
}
<div class="wrapper"></div>
The API supports a filter. You can pass a list of IDs and other properties, e.g.:
fetch('https://jsonplaceholder.typicode.com/posts?id=0&id=1&id=2&id=3&id=4&id=5&id=6&id=7&id=8&id=9&id=10&id=11')
.then((response) => response.json())
.then((json) => console.log(json));
It sends one request and returns a response containing an array of posts:
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
},
{
"userId": 1,
"id": 5,
"title": "nesciunt quas odio",
"body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
},
{
"userId": 1,
"id": 6,
"title": "dolorem eum magni eos aperiam quia",
"body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
},
{
"userId": 1,
"id": 7,
"title": "magnam facilis autem",
"body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
},
{
"userId": 1,
"id": 8,
"title": "dolorem dolore est ipsam",
"body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
},
{
"userId": 1,
"id": 9,
"title": "nesciunt iure omnis dolorem tempora et accusantium",
"body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas"
},
{
"userId": 1,
"id": 10,
"title": "optio molestias id quia eum",
"body": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
},
{
"userId": 2,
"id": 11,
"title": "et ea vero quia laudantium autem",
"body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
}
]
Example:
fetch("https://jsonplaceholder.typicode.com/posts?id=0&id=1&id=2&id=3&id=4&id=5&id=6&id=7&id=8&id=9&id=10&id=11")
.then(res => res.json())
.then(data => {
const html = data.reduce((acc, el) => acc + "<div class=\"posts\">" + el.title + "</div>", '');
const result = document.querySelector(".wrapper");
result.innerHTML = html;
});
<div class="wrapper"></div>
JSONPlaceholder is based on JSON Server and supports pagination. You can achieve the same result with
fetch('https://jsonplaceholder.typicode.com/posts?_page=0&_limit=12')
.then((response) => response.json())
.then((json) => console.log(json));

Object output returning NAN [duplicate]

This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 3 years ago.
This is my code
const products =
[
{
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
"coefficient":2,
"price": () => 2000 * this.coefficient
},
{
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
"coefficient":3,
"price": () => 2000 * this.coefficient
},
]
I want to return the price depends on the coefficient, but when i excute
products[0].price() // return NaN
how can i fix that ?
Thanks.
This is due to the way that arrow functions handle the this scope. In this case, replacing the arrow function (() => this.something) with a traditional JS function (function() { return this.something; }) will solve your problem.
The this in an arrow function refers to the class scope, that is an empty object; in that case, yo refer to the the object scope you must use the full function syntax.
Try this:
products = [
{
id: 1,
title:
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body:
"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
coefficient: 2,
price: function() {
return 2000 * this.coefficient;
}
},
{
id: 2,
title: "qui est esse",
body:
"est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
coff: 3,
price: function() {
return 2000 * this.coefficient;
}
}
];
console.log(products[0].price()) // 4000
console.log(products[1].price()) // 6000
For the arrow functions, value of this is not based on the object reference using which the function was executed. Rather it uses the this reference from the closure where it was declared. Check the documentation here on MDN. In your scenario this.coefficient would be undefined, which when multiplied with 2000 results in NaN.
You can change the arrow functions to proper functions if you need this to refer to the object reference on which price function was called. Changed code should be something like this:
products = [
{
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
"coefficient":2,
"price": function() { return 2000 * this.coefficient; }
}
];
You can use this :
const products =
[
{
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
"coefficient": 2,
price() {
return 2000 * this.coefficient
}
},
{
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
"coefficient": 3,
price() {
return 2000 * this.coefficient
}
},
]

How to combine use of anchor tags and routeParams to fetch JSON by ID

I am kind of new in Angular and have been trying my level best to understand it. I have a problem.
I would like to use an anchor tag to take me to a specific id of a json file.I just dont know how<div ng-repeat="portfolio in portfolios" class=" portfolio-item col-xs-12 col-sm-6 col-md-3 shuffle-item filtered animated" style="margin:0; padding:0;" id="grid">
<div class="portfolio">
<figure class="effect-julia">
<img ng-src="{{portfolio.image}}">
<figcaption>
<div class="socials">
<i class="fa fa-share animated"></i>
</div>
<div class="scoial-heading">
<p> {{portfolio.name}} </p>
<strong>{{portfolio.description}}</strong>
</div>
</figcaption>
</figure>
</div>
<!-- /.portfolio -->
</div>
Here are my codes:
angular.module('app', [
'ngRoute',
'app.controllers',
'angular-scroll-animate',
'ui.bootstrap',
'ngMessages'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutctrl'
})
.when('/services', {
templateUrl: 'views/services.html',
controller: 'servicesCtrl'
}).
when('/portfolio', {
templateUrl: 'views/portfolio.html',
controller: 'portfolioCtrl'
})
.when('/portfolio/:id', {
templateUrl: 'views/portfolio-detail.html',
controller: 'portfolioController'
}).
when('/blog', {
templateUrl: 'views/blog.html',
controller: 'blogCtrl'
}).
when('/project', {
templateUrl: 'views/process_form.html',
controller: 'projectCtrl'
}).otherwise({
redirectTo: '/'
});
}]);
angular.module('app.controllers', [])
.controller('homeCtrl', ['$scope', '$rootScope','$http', function($scope, $rootScope,$http) {
$rootScope.Title = "Home";
$scope.animateElementIn = function($el) {
$el.addClass('animated fadeInRight');
};
$scope.animateElementOut = function($el) {
};
$http.get('data/portfolios.json').success(function(data){
$scope.portfolios= data;
});
}])
.controller('portfolioCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
$rootScope.Title = "Portfolio";
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
var slides = $scope.slides = [{
image: 'http://placehold.it/750x500'
}, {
image: 'http://placehold.it/750x500'
}, {
image: 'http://placehold.it/750x500'
}];
}])
.controller('servicesCtrl', ['$rootScope', function($rootScope) {
$rootScope.Title = "Services";
}])
.controller('aboutctrl', ['$rootScope', function($rootScope) {
$rootScope.Title = "About";
}])
.controller('blogCtrl', ['$rootScope', function($rootScope) {
$rootScope.Title = "Blog";
}])
.controller('projectCtrl', ['$rootScope', function($rootScope) {
$rootScope.Title = "Project";
}])
.controller('portfolioController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams){
$http.get('data/detail.json').success(function(data){
$scope.detail = data[$routeParams.id];
});
}]);
My json files:
[
{
"image": "img/portfolio01.jpg",
"name": "SleepShareStay",
"description": "Short-Term Listing Online Platform",
"id": 0
}, {
"image": "img/portfolio02.jpg",
"name": "Boyd Photography",
"description": "Professional Photography Studio",
"id": 1
}, {
"image": "img/portfolio03.jpg",
"name": "Arusha Flour Supply",
"description": "Tanzania website",
"id": 2
}, {
"image": "img/portfolio04.jpg",
"name": "Boyd Photography",
"description": "Facebook Profile"
}, {
"image": "img/portfolio05.jpg",
"name": "EveryShilling App",
"description": "Web and mobile App ERP solution"
}, {
"image": "img/portfolio05.jpg",
"name": "Ecosolutions",
"description": "Environmental NGO website"
}
]
[
{
"title": "First Post",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nisi odio neque aliquam magni explicabo sint iste incidunt minus itaque ducimus voluptas similique eos natus nobis alias quam accusamus, aspernatur doloremque amet, nesciunt esse velit. Repudiandae sunt dolorem esse eum, qui aliquid pariatur velit enim autem temporibus minima cumque ipsa in, accusantium sed deleniti natus sequi illo nihil ipsum quam est sit dignissimos itaque quo? Aperiam qui et harum porro eligendi dolore tempora accusamus culpa voluptate animi aliquid alias necessitatibus quod ipsam hic, dolorem expedita suscipit, nobis quas quia. A eum ullam alias saepe accusantium deleniti doloremque tempora assumenda error ipsam incidunt quam optio itaque atque minima eos dicta quidem officiis, obcaecati architecto voluptas, debitis illo consequatur. Blanditiis debitis quisquam obcaecati possimus modi, repudiandae alias vero, officia doloremque numquam deserunt nobis illo ipsum ex consectetur iure minima doloribus quasi! Libero iure nulla placeat omnis magni error ducimus facere, magnam officia, assumenda delectus commodi qui praesentium eaque quaerat perspiciatis pariatur, temporibus quibusdam. Accusantium a accusamus quas, ut quisquam dignissimos officia, in maiores explicabo temporibus eaque velit iure omnis totam delectus amet laboriosam debitis pariatur consectetur. Laborum, vel accusamus illo officiis! Minima recusandae, earum numquam architecto vitae illo nostrum fugit sequi! Non in ratione delectus minima quae eligendi temporibus cupiditate! Iusto debitis hic nostrum alias libero dolores obcaecati veritatis reprehenderit ipsam eius unde fugiat, natus numquam minima saepe et totam dignissimos. Molestiae deleniti consequuntur deserunt illum, quas rem. Dolore soluta non culpa, officiis excepturi, beatae, tempore, odit aliquam magnam eum delectus. Aspernatur fugit a facilis eos amet. Ab modi atque dolor repudiandae autem similique nostrum fugit excepturi commodi nam reprehenderit voluptatem deserunt ipsam magni ullam aliquam, molestiae aut hic alias nesciunt cupiditate expedita quidem ipsum. Labore maiores facilis possimus repudiandae itaque autem natus at dignissimos enim ratione accusantium perferendis ut perspiciatis in, recusandae culpa commodi repellat quod veniam. Sequi magni ut iusto autem a vero sapiente tempora sunt iure distinctio itaque dicta quidem, nam provident dolorum est quam, nesciunt veritatis natus nostrum. Beatae, modi eveniet provident magni cumque laboriosam non quasi praesentium. Facilis debitis et nam veniam sint optio ullam nisi reprehenderit, cumque praesentium modi dicta velit, soluta dolor eum voluptates odit consequuntur. Soluta nam, magni quibusdam! Animi temporibus eum dolor quas sed ex aliquid tempora, quis magni sunt esse ipsum voluptatibus illum sit, magnam accusantium quisquam distinctio. Facere at tempore maxime placeat reprehenderit sed sint ipsa ad suscipit veritatis quos illo sequi facilis hic veniam nihil maiores error doloremque, amet illum earum. In, quidem dolores obcaecati accusamus esse dolore, sit itaque ab. Dolor iure culpa provident incidunt. Blanditiis earum, commodi id ad ducimus praesentium obcaecati doloribus sunt, aut repellat veniam impedit atque temporibus dolorem facilis explicabo maxime facere reiciendis neque modi autem corporis dolor fuga! Aut voluptatem perspiciatis obcaecati quos eius est aspernatur, exercitationem quam laborum, eos, inventore explicabo. A nemo, rerum tenetur veritatis perferendis, inventore commodi neque porro facere accusamus totam. Aut quaerat accusamus adipisci sunt aliquid ducimus similique eum assumenda autem, quidem, reiciendis asperiores vitae veniam hic quas quisquam?",
"id": 0
}, {
"title": "Second Post",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit voluptatum laudantium soluta deserunt optio voluptatibus quod facilis ab excepturi libero. Dolore quidem quia reprehenderit explicabo, pariatur ad, repudiandae sit. Explicabo facere odio consectetur excepturi. Similique non, atque impedit? Dolor alias, numquam, quia inventore, dolorem nobis nemo ipsam asperiores recusandae fugit tempora ducimus, provident vitae quae! Iste accusantium hic voluptatem, maiores quo suscipit veniam placeat dolorem. Quidem ducimus, est velit beatae quae eveniet laboriosam atque vero consequatur sed! Libero laboriosam consequuntur, delectus dignissimos. Unde, a? Magnam totam labore amet quasi nemo impedit explicabo! Repellendus possimus odit mollitia, fugiat laborum soluta velit deserunt tempore vero repellat autem a perferendis odio, sunt sapiente nobis illo explicabo. Inventore dignissimos quae ea hic cupiditate voluptates eos ratione voluptatibus laboriosam illo delectus odio voluptatem exercitationem maiores ipsum totam similique itaque minus nam, provident maxime beatae temporibus perferendis aliquam. Tempora modi, sequi quaerat dolor quas numquam magni error, maxime officia. Sapiente voluptatem labore quidem quia facere esse dolores ipsam iusto amet in nulla aliquam dignissimos harum ducimus, quos, perspiciatis molestiae reiciendis est, voluptates. Enim libero repellendus, voluptatem recusandae dolorem natus ex veniam blanditiis consequatur commodi doloremque quasi similique aliquid, sit tempore, sequi optio! Ad, aliquam quae, amet ratione sequi quibusdam vitae magnam eaque officia labore quidem odit quasi. Enim dolore saepe qui consequatur veniam similique eum quia eligendi obcaecati porro, repudiandae quam ratione distinctio sit fuga at! Reprehenderit magni, sequi sapiente quasi maxime laboriosam, optio ullam facere pariatur amet iure debitis possimus porro odio sed tempora illo eveniet deserunt illum eos enim dolorem, assumenda. Odit et soluta quas laudantium libero placeat, aut provident, maxime incidunt sapiente ad, veniam ipsam, ex odio laborum expedita harum rem. Ducimus, ad voluptas modi suscipit, recusandae nemo perferendis doloremque labore, asperiores nisi explicabo. Impedit libero at excepturi voluptatum porro, vel nihil et dolores voluptas molestias vero maiores deleniti, possimus eos architecto cum, sapiente non cupiditate soluta id? Dignissimos, fugiat, temporibus. Soluta aut alias officia, doloremque dolores est impedit quo non ullam dolore dolor quos, autem nostrum magni excepturi sed minima optio, incidunt ipsam similique praesentium vel nam sint tempore! Dolorum quas, eius, quis rerum et ipsam quod, vitae quidem hic officia inventore. Alias itaque vero temporibus nemo rerum, cumque esse labore, libero, suscipit blanditiis saepe illum perferendis omnis hic nulla nostrum unde provident eaque a fuga iste pariatur delectus aliquam dolore dicta! Praesentium ipsa numquam quam sed impedit quibusdam iure accusamus, rem.",
"id": 1
}, {
"title": "Third Post",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro repudiandae ut nostrum ab tenetur maiores illum ipsa vitae iste earum, commodi, voluptatibus quisquam saepe. Esse ab mollitia tempora expedita, assumenda aperiam nobis? Ipsa obcaecati autem, sit magnam magni consequuntur veritatis praesentium veniam nulla dolores repellat doloribus voluptatibus itaque aperiam. Suscipit accusantium, eligendi tempora error minus, nemo, obcaecati quam sapiente inventore eaque eius voluptatum nesciunt! Accusamus repellendus explicabo labore ipsa eligendi fuga, itaque non asperiores minima ullam perspiciatis, incidunt sequi, enim ipsum cum, earum sit quibusdam ad culpa architecto qui voluptatem quaerat impedit. At beatae ullam dolores incidunt sint. Amet quasi vel laborum eius cum mollitia maiores similique obcaecati. Unde necessitatibus ullam, possimus. Labore, natus. Quis iusto ipsa maiores porro quae odio, quas libero in ea excepturi incidunt harum. Harum magni laudantium earum, aperiam officiis quidem reprehenderit eaque deserunt possimus illum commodi excepturi dicta debitis tenetur. Aut, eaque ipsam necessitatibus minus, doloremque, provident quas quibusdam cupiditate deleniti veniam quasi? Perspiciatis, cupiditate totam. Officiis quo pariatur eligendi, cupiditate sed dolorem ad reiciendis nobis est eaque facilis fugiat nihil voluptatum, obcaecati quisquam sapiente sunt labore et mollitia distinctio molestias eius tempora quae vel. At fugiat soluta in, asperiores eius odio voluptatum nobis quo tempore quidem, labore, iure omnis qui aliquid dolores non accusantium quam harum dolore ea suscipit, deserunt. Quasi repudiandae voluptate laudantium cum, provident beatae sapiente illo atque quas eius consequatur autem ipsa libero, ab tenetur, magni omnis itaque ipsum asperiores optio earum eaque. Quam a iusto delectus accusamus, inventore sint earum repellendus, deserunt maxime fugit magnam. Ipsum hic, illo officiis earum placeat harum neque recusandae vero quidem quibusdam consequatur corporis vitae odio nisi fuga, quod unde adipisci enim nam quae numquam! Cupiditate cumque ratione rem eius eos. Praesentium iusto dolores eos atque doloribus debitis eaque quasi ut mollitia, nisi, ipsam error expedita nobis, unde suscipit laborum quo? Incidunt necessitatibus reiciendis nulla minus dicta rerum dolor illo delectus tenetur quae, impedit reprehenderit ipsum voluptates numquam laborum ipsa. Voluptas, asperiores, ratione consectetur beatae consequatur praesentium cumque autem provident officiis tempora laudantium veniam voluptatem consequuntur explicabo tempore dolores est amet suscipit eaque delectus saepe natus. Rerum optio, suscipit quae libero reprehenderit dolorem neque. Sapiente officiis aut, odit asperiores amet unde voluptatum itaque hic dolor. Reprehenderit totam fuga voluptate iste quis magni illo sequi quod nisi consectetur obcaecati ducimus fugiat harum corrupti optio, nulla dolor placeat tenetur eaque recusandae officia eius facilis libero! Error nemo explicabo sunt minima, veniam dolorem. Porro atque natus totam in rem voluptates eaque, perspiciatis nemo inventore, maiores iste id, culpa, cum distinctio incidunt possimus earum. Praesentium eveniet libero ad voluptatem quas modi, animi id ducimus qui necessitatibus aliquam odio, reprehenderit atque hic accusantium molestias consequatur eligendi, asperiores autem voluptatibus cum. Maxime fuga recusandae pariatur perferendis totam magni eligendi enim sunt, voluptas quae laudantium, incidunt cum iure, ut est laboriosam deleniti at iste voluptatum assumenda vitae dignissimos! Quam possimus, eveniet illo, eos vel aperiam. Ratione iusto tempora dicta, molestiae veniam. Quam, suscipit accusantium commodi praesentium eveniet maxime dolore, iure ipsum eius. Numquam obcaecati molestiae dicta, maxime iusto cupiditate omnis assumenda nobis quisquam. Perspiciatis, dolorem? Placeat, dignissimos dolorum alias nulla tenetur aperiam enim asperiores eveniet veniam maiores, illo? Cupiditate beatae voluptas voluptatum nulla eveniet qui quasi placeat impedit inventore possimus, minus doloremque ipsum, repellat, cumque, itaque! Voluptatum, repellendus quos corporis? Mollitia est amet quisquam, at sunt distinctio vero odio sapiente autem non beatae possimus architecto reiciendis labore voluptatum dicta natus totam delectus eveniet dolor eius quasi incidunt reprehenderit nemo nihil. Pariatur, accusantium animi itaque neque quam laudantium! Nulla distinctio eos, animi impedit, sed excepturi voluptatem, tempore odio natus odit voluptas deleniti velit.",
"id": 2
}
]
I would like when someone clicks on the first anchor tag above in the first HTML code,they are taken to the respective detail.json file....i.e when you click on the first<i class="fa fa-share animated"></i> then you are taken to detail.json with id 0
Create a view for your json files,
// Create a route for portfolioCtrl like below
portfolio/:jsonFileName
now figure out the filename from route param portfolioCtrl
var jsonFileName = $routeParams.jsonFileName
And fetch the json file with the name
$htttp.get("wherever/" + jsonFileName + ".json");

Categories

Resources