We Keep Coding

API call with Axios filtering response.data

I want to get the newest 8 products depend on product's date. I can get the whole products array and filter it as you see below:
const newestProducts= [];
axios.get("http://localhost:3003/products").then(response => {
let products = response.data.sort(function(a, b) {
return new Date(b.date) - new Date(a.date);
});
newstProducts = product.slice(0,7)
});
but this will be so bad if I have thousands of product, and I just need to get the newest 8 Products only
I thought about adding ?_limit=8 to the call
axios.get("http://localhost:3003/products?_limit=8").then{...}
but this also doesn't work propersly as you know because it gets me the only top 8 products of the array
Is there any way to filter the products before I get it from the server or I MUST store them all in var and then filter them
The Json File
"categories": [
{
"id": 9,
"category": "bathroom",
"date": "2020/8/3",
"name": "ullam basin mixer",
"price": 160,
"img_1": "rim_mixer_01.jpg",
"img_2": "rim_mixer_02.jpg",
"rating": 4.5,
"description": "MARMO is a complete series made of 72 models, with different shapes and sizes for different functions, that keeps uncompromised its elegant beauty. This is a Demo Online Store."
},
{
"id": 10,
"category": "bathroom",
"date": "2020/8/19",
"name": "gravida bathtub",
"price": 2100,
"img_1": "inbani_bathtub_01.jpg",
"img_2": "inbani_bathtub_02.jpg",
"rating": 4,
"description": "A young company with a wealth of experience. created in 2004, inbani has evolved into a leader in innovation thanks to a conviction to create products which truly benefit the well-being of the customer. This is a Demo Online Store. No orders shall be fulfilled."
},
{
"id": 11,
"category": "bathroom",
"date": "2020/9/9",
"name": "vulputate mixer",
"price": 300,
"img_1": "marmo_mixer_01.jpg",
"img_2": "marmo_mixer_02.jpg",
"description": "MARMO is a complete series made of 72 models, with different shapes and sizes for different functions, that keeps uncompromised its elegant beauty. This is a Demo Online Store."
},
{
"id": 12,
"category": "bathroom",
"date": "2018/7/17",
"name": "aliquam veneatis bathtub",
"price": 2580,
"img_1": "sa_oche_01.jpg",
"img_2": "sa_oche_02.jpg",
"description": "Its oval, elliptical design with the incongruent walls invokes an avant-garde atmosphere in the bathroom."
},
{
"id": 13,
"category": "kitchen",
"date": "2020/3/13",
"name": "quisque teapot",
"price": 240,
"img_1": "theo_teapot_01.jpg",
"img_2": "theo_teapot_02.jpg",
"description": "Theo Teapot is a Scandinavian-Japanese teapot made from stoneware and bamboo, designed by Unit 10 Design for Stelton. This is a Demo Online Store. No orders shall be fulfilled."
},
{
"id": 14,
"category": "kitchen",
"date": "2020/2/12",
"name": "creamic teapot",
"price": 60,
"img_1": "cer_teapot_01.jpg",
"img_2": "cer_teapot_02.jpg",
"rating": 3.9,
"description": "Matte ceramic tea pot comes with integrated and removable metal tea infuser. Capacity 700 ml (2.96 cups). Dishwasher safe. This ceramic teapot has a white matte finish, coupled with a square shape and curved lines."
},
{
"id": 15,
"category": "kitchen",
"date": "2019/2/1",
"name": "bottle grinders",
"price": 30,
"img_1": "bottle_gringer_01.jpg",
"img_2": "bottle_gringer_02.jpg",
"rating": 4.8,
"description": "Bottle Grinders is a minimal, timeless salt and pepper mill set designed by Norm.Architects for Menu. Steering away from the predictable grinder, the Norm Bottle Grinder is not what you expect to see in a salt and pepper grinder. The form, shaped more like a bottle, cleverly tricks the user to encourage a more playful and experimental interaction with the product. This is a Demo Online Store. No orders shall be fulfilled. Purchase this product"
},
{
"id": 16,
"category": "lighting",
"date": "2020/1/3",
"name": "commodo blown lamp",
"price": 275,
"img_1": "tradition_blown_01.jpg",
"img_2": "tradition_blown_02.jpg",
"description": "Blown lamp SW3 & SW4 by &tradition is a mouth-blown pendant lamp with a quilted pattern, it comes in a translucent variant with a silver lustre or in a opal white version. Blown lamp is fitted with a powder-coated metal suspension. This is a Demo Online Store. No orders shall be fulfilled."
},
{
"id": 17,
"category": "lighting",
"date": "2020/6/9",
"name": "spot table",
"price": 100,
"img_1": "spot_lamp_01.jpg",
"img_2": "spot_lamp_02.jpg",
"rating": 3.4,
"description": "Set the stage. The Spot lamp is a lively, versatile addition to your room. This is a Demo Online Store. No orders shall be fulfilled."
}
]

The problem is not in API Calling... To enhance the performance you have to refractor the DATABASE REQUEST in the backend to get the last 8 products only.
Note:
You make this through the query you send to the database in the controller (ROUTE ) in the backend

Append '|' after every array element

I have this JSON & what I want to do is to make genres like this action|adventure|comedy
{
"id": 1,
"key": "deadpool",
"name": "Deadpool",
"description": "A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool.",
"genres": [
"action",
"adventure",
"comedy"
],
"rate": 8.6,
"length": "1hr 48mins",
"img": "assets/images/movie-covers/deadpool.jpg"
},
{
"id": 2,
"key": "we-are-the-millers",
"name": "We're the Millers",
"description": "A veteran pot dealer creates a fake family as part of his plan to move a huge shipment of weed into the U.S. from Mexico.",
"genres": [
"adventure",
"comedy",
"crime"
],
"rate": 7,
"length": "1hr 50mins",
"img": "assets/images/movie-covers/we-are-the-millers.jpg"
}
my component code snippet
data => {
this.movies = data;
var tempArr= data
var genres;
let genresWithPipe=[];
let len= tempArr.length;
for(var i=0; i<len; i++){
genres=tempArr[i].genres+'|';
// console.log(tempArr[i].genres)
for(var j=0;j<genres.length; j++){
if(j<genres.length-1)
genres[j]= genres[j]+'|';
console.log(genres,data);
//genresWithPipe=genres;
}
}
console.log(this.movies,genres)
}
I have tried to do it with the help of for loop in my component but then when I am displaying it in the html with the help of *ngFor then because it's a local variable,it won't show up. If I store array values in a global variable then the variable only store the last array.

You can use map method in order to achieve your requirement and obtain a more cleaner solution.
The map() method creates a new array with the results of calling a
provided function on every element in the calling array.
Also, you can use join method in order to obtain the structure action|adventure|comedy with | delimiter.
let array=[{ "id": 1, "key": "deadpool", "name": "Deadpool", "description": "A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool.", "genres": [ "action", "adventure", "comedy" ], "rate": 8.6, "length": "1hr 48mins", "img": "assets/images/movie-covers/deadpool.jpg" }, { "id": 2, "key": "we-are-the-millers", "name": "We're the Millers", "description": "A veteran pot dealer creates a fake family as part of his plan to move a huge shipment of weed into the U.S. from Mexico.", "genres": [ "adventure", "comedy", "crime" ], "rate": 7, "length": "1hr 50mins", "img": "assets/images/movie-covers/we-are-the-millers.jpg" }];
array=array.map(function(item){
item.genres=item.genres.join('|');
return item;
});
console.log(array);

A good solution with Array.map() has been proposed, here is another option with Array.forEach():
const data = [{
"id": 1,
"key": "deadpool",
"name": "Deadpool",
"description": "A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool.",
"genres": [
"action",
"adventure",
"comedy"
],
"rate": 8.6,
"length": "1hr 48mins",
"img": "assets/images/movie-covers/deadpool.jpg"
},
{
"id": 2,
"key": "we-are-the-millers",
"name": "We're the Millers",
"description": "A veteran pot dealer creates a fake family as part of his plan to move a huge shipment of weed into the U.S. from Mexico.",
"genres": [
"adventure",
"comedy",
"crime"
],
"rate": 7,
"length": "1hr 50mins",
"img": "assets/images/movie-covers/we-are-the-millers.jpg"
}
]
const genres = [];
data.forEach(film => genres.push(film.genres.join("|")));
console.dir(genres);
Note that your data definitely doesn't look like what you put in the code sample, it must be wrapped with [].

Show latest facebook post on website

I'm having trouble in showing the latest post of my Facebook page in my website without using PHP since the website is not hosted in an Apache server.
What I've done till now:
Created a Facebook app and generated an Access token.
Access to Facebook Developer Graph explorer, and used GET method
https://developers.facebook.com/tools/explorer?method=GET&path=nextgenerationmorocco%2Ffeed%3Flimit%3D1&version=v2.0
The result after clicking on Graph Explorer submit button:
{
"data": [
{
"id": "421944571240838_501444706624157",
"from": {
"category": "Organization",
"category_list": [
{
"id": "162237190493977",
"name": "Computer Training"
},
{
"id": "108472109230615",
"name": "Computer Services"
}
],
"name": "Next Generation I.T.",
"id": "421944571240838"
},
"message": "Inscriptions ouvertes pour la formation symfony2\nProfil du formateur : Ingénieur d'état, 5 ans d'expérience.",
"picture": "https://fbexternal-a.akamaihd.net/safe_image.php?d=AQCyB9kEztxV2fnb&w=154&h=154&url=http%3A%2F%2Fngitmaroc.com%2Fimg%2Fportfolio%2Fformation-web-1.jpg",
"link": "http://ngitmaroc.com/formation-web.html",
"name": "Formation Web",
"caption": "ngitmaroc.com",
"description": "Formation programmation/développement site application web php5 symfony2 Maroc Oujda",
"icon": "https://fbstatic-a.akamaihd.net/rsrc.php/v2/yD/r/aS8ecmYRys0.gif",
"privacy": {
"value": ""
},
"type": "link",
"status_type": "shared_story",
"created_time": "2014-06-01T12:17:22+0000",
"updated_time": "2014-06-01T12:17:22+0000",
"likes": {
"data": [
{
"id": "1459899217586855",
"name": "Nassira Said"
},
{
"id": "1484688285098548",
"name": "Mohamed Tizaoui"
},
{
"id": "1458333711077710",
"name": "Hasnae Lazaar"
},
{
"id": "574623632656391",
"name": "KaOûtar OuJdiia"
}
],
"paging": {
"cursors": {
"after": "NTc0NjIzNjMyNjU2Mzkx",
"before": "MTQ1OTg5OTIxNzU4Njg1NQ=="
}
}
}
}
],
"paging": {
"previous": "https://graph.facebook.com/v2.0/421944571240838/feed?limit=1&since=1401625042",
"next": "https://graph.facebook.com/v2.0/421944571240838/feed?limit=1&until=1401625041"
}
}
How can I use Javascript to fetch these information and show them on my website : "message", "from", "created_time"? Any help will be highly appreciated since I'm new to Javascript and Facebook developers!

You alternatively may use Facebook Likebox plugin to show your recent posts in your website.

Request a complete response object instead of compact reponse object foursquare venues search api?

When we request a api call to foursquare for search venues of certain category
It returns a compact response not complete response because of which i am not able to get complete information about the place like if the place is open, price etc which is only returned in a complete response, can i get a complete response instead of compact response?? more info provided here.
Eg:
call:https://api.foursquare.com/v2/venues/search?ll=18.5308225,73.8474647&categoryId=4bf58dd8d48988d1e1931735&radius=1000&v=20131021&limit=1
Result:
{
"meta": {
"code": 200
},
"response": {
"venues": [{
"id": "4b975471f964a520c9ff34e3",
"name": "Yana Sizzler & Wok",
"contact": {
"phone": "+912066013897",
"formattedPhone": "+91 20 6601 3897"
},
"location": {
"address": "F C Road",
"lat": 18.52802688063791,
"lng": 73.84272476029567,
"distance": 589,
"cc": "IN",
"city": "Pune",
"state": "India",
"country": "India"
},
"categories": [{
"id": "4bf58dd8d48988d1df931735",
"name": "BBQ Joint",
"pluralName": "BBQ Joints",
"shortName": "BBQ",
"icon": {
"prefix": "https:\/\/ss1.4sqi.net\/img\/categories_v2\/food\/bbq_",
"suffix": ".png"
},
"primary": true
}],
"verified": false,
"restricted": true,
"stats": {
"checkinsCount": 542,
"usersCount": 402,
"tipCount": 19
},
"specials": {
"count": 0,
"items": []
},
"hereNow": {
"count": 0,
"groups": []
},
"referralId": "v-1386276988"
}]
}
}
But i am not getting informatiion like isOpen Price etc which we get in the complete response when we use explore.

The API does not support returning complete objects in venue search responses—you need to make a separate venue details call to get the information you're looking for. We recommend caching venue details (for up to 30 days) to avoid having to repeatedly calling this endpoint to retrieve this information that doesn't necessarily change that often.

How do I get local business results using google maps API

Is there any google/Yahoo/Bing API which gives local business results based on a ZIP/GeoCode of a location? If yes, please let me know.
If Google Maps has such service, please let me know what where do I get a reference regarding that?

Disclosure: I work at SerpApi.
Is there any google/Yahoo/Bing API which gives local business results based on a ZIP/GeoCode of a location?
Yes, you can use SerpApi to get local business results based on ZIP, query, or GPS coordinates: https://serpapi.com/playground?engine=google_maps&q=coffee+Austin+TX+78747&type=search
Sample response
{
"local_results": [
{
"position": 1,
"title": "The Standard Grill",
"data_id": "0x89c259c06677ef37:0x5707f22fe7137aa2",
"gps_coordinates": {
"latitude": 40.7406697,
"longitude": -74.0079042
},
"place_id_search": "https://serpapi.com/search.json?data=%214m5%213m4%211s0x89c259c06677ef37%3A0x5707f22fe7137aa2%218m2%213d40.7406697%214d-74.0079042&engine=google_maps&google_domain=google.com&token=f01cbc346c0db944&type=place",
"rating": 4.1,
"reviews": 840,
"price": "$$$",
"type": "Bar & grill",
"address": "848 Washington St, New York, NY 10014",
"hours": "Open until 11:30 PM",
"phone": "(212) 645-4100",
"website": "http://www.thestandardgrill.com/",
"description": "Trendy, upscale American dining. Trendy, clubby, hotel-set American bistro under the High Line with sidewalk tables & lively bar.",
"editorial_reviews": {
"summary": "Where To Eat On Christmas Day In New York City",
"link": "https://www.forbes.com/sites/melissakravitz/2019/12/13/christmas-dinner-new-york-city/"
},
"thumbnail": "https://lh5.googleusercontent.com/p/AF1QipMGM_4u4iQcrdRZApFFIinDga-cb0rXu79aFxvv=w125-h92-k-no"
},
{
"position": 2,
"title": "Rockmeisha - Sake & Grill",
"data_id": "0x89c259938c3a05cb:0xa1b2fe3b945a853d",
"gps_coordinates": {
"latitude": 40.732638,
"longitude": -74.00237299999999
},
"place_id_search": "https://serpapi.com/search.json?data=%214m5%213m4%211s0x89c259938c3a05cb%3A0xa1b2fe3b945a853d%218m2%213d40.732638%214d-74.00237299999999&engine=google_maps&google_domain=google.com&token=8bcfdeb90a3d1f1a&type=place",
"rating": 4.3,
"reviews": 102,
"price": "$$",
"type": "Tapas restaurant",
"address": "11 Barrow St, New York, NY 10014",
"hours": "Opens at 6:00 PM",
"phone": "(212) 675-7775",
"website": "http://rockmeisha-izakaya.business.site/",
"description": "Japanese drink-&-snack joint. Traditional Japanese drinking establishment pairing its sake & beer with ramen & small plates.",
"editorial_reviews": {
"summary": "25 Exemplary Fried Chicken Dishes Around NYC",
"link": "https://ny.eater.com/maps/nyc-fried-chicken-best"
},
"thumbnail": "https://lh5.googleusercontent.com/p/AF1QipNA8eJZ-VZxHIV43490yYZCnjDbBbYUA9wiH_Lq=w122-h92-k-no"
}
]
}
You can use Node.js wrapper
const { GoogleSearchResults } = require('google-search-results-nodejs')
const client = new GoogleSearchResults("API_KEY")
const parameters = {
engine: "google_maps",
type: "search",
google_domain: "google.com",
q: "NY 10014 grill",
};
function onResponse(data) {
console.log(data.local_results[0])
}
client.json(parameters, onResponse)
If Google Maps has such service, please let me know what where do I get a reference regarding that?
https://serpapi.com/maps-local-results

Google does have that, you can even check few sample implementations:
http://code.google.com/apis/ajaxsearch/local.html