Develop Reference

Fetch JSON data that has multiple pages?

I'm making a fetch to the API to grab the total number of players, the returned data is below:
"data": [
{
"id": 558,
"first_name": "Dave",
"height_feet": null,
"height_inches": null,
"last_name": "Jamerson",
"position": "",
"team": {
"id": 11,
"abbreviation": "HOU",
"city": "Houston",
"conference": "West",
"division": "Southwest",
"full_name": "Houston Rockets",
"name": "Rockets"
},
"weight_pounds": null
},
{
"id": 559,
"first_name": "Scott",
"height_feet": null,
"height_inches": null,
"last_name": "Brooks",
"position": "",
"team": {
"id": 18,
"abbreviation": "MIN",
"city": "Minnesota",
"conference": "West",
"division": "Northwest",
"full_name": "Minnesota Timberwolves",
"name": "Timberwolves"
},
"weight_pounds": null
},
{
"id": 560,
"first_name": "Rolando",
"height_feet": null,
"height_inches": null,
"last_name": "Blackman",
"position": "",
"team": {
"id": 7,
"abbreviation": "DAL",
"city": "Dallas",
"conference": "West",
"division": "Southwest",
"full_name": "Dallas Mavericks",
"name": "Mavericks"
},
"weight_pounds": null
},
{
"id": 561,
"first_name": "Avery",
"height_feet": null,
"height_inches": null,
"last_name": "Johnson",
"position": "",
"team": {
"id": 8,
"abbreviation": "DEN",
"city": "Denver",
"conference": "West",
"division": "Northwest",
"full_name": "Denver Nuggets",
"name": "Nuggets"
},
"weight_pounds": null
},
{
"id": 562,
"first_name": "Rod",
"height_feet": null,
"height_inches": null,
"last_name": "Higgins",
"position": "",
"team": {
"id": 10,
"abbreviation": "GSW",
"city": "Golden State",
"conference": "West",
"division": "Pacific",
"full_name": "Golden State Warriors",
"name": "Warriors"
},
"weight_pounds": null
},
{
"id": 566,
"first_name": "Sam",
"height_feet": null,
"height_inches": null,
"last_name": "Vincent",
"position": "",
"team": {
"id": 22,
"abbreviation": "ORL",
"city": "Orlando",
"conference": "East",
"division": "Southeast",
"full_name": "Orlando Magic",
"name": "Magic"
},
"weight_pounds": null
},
{
"id": 567,
"first_name": "Isiah",
"height_feet": null,
"height_inches": null,
"last_name": "Thomas",
"position": "",
"team": {
"id": 9,
"abbreviation": "DET",
"city": "Detroit",
"conference": "East",
"division": "Central",
"full_name": "Detroit Pistons",
"name": "Pistons"
},
"weight_pounds": null
}
],
"meta": {
"total_pages": 39,
"current_page": 1,
"next_page": 2,
"per_page": 100,
"total_count": 3828
}
Problem is, the API only allows for a max of 100 results. As you can see in the "meta" object at the bottom, there is a total_count of 3828 and 39 pages, how would I access the other pages and get all 3828 results? currently I only get the first page with 100 results when I fetch.
const getPlayers = () => {
fetch(`https://www.balldontlie.io/api/v1/players?per_page=100`)
.then(res => res.json())
.then(data => dispatch(playerActions.getPlayers(data)));
}

compare objects of same array and group their some properties when specific property matched with other object

I have an array of object as following :
"orders": [
{
"orderID": 1,
"fullName": "xyz",
"email": "xyz#gmail.com",
"phone": "12345",
"flatNo": "A-5",
"complex": "tara tra",
"landmark": null,
"street": null,
"area": "",
"city": "",
"productID": 2,
"name": "curd",
"price": 52,
"image": "curd.png",
"quantity": 1
},
{
"orderID": 1,
"fullName": "xyz",
"email": "xyz#gmail.com",
"phone": "12345",
"flatNo": "A-5",
"complex": "tara tra",
"landmark": null,
"street": null,
"area": "",
"city": "",
"productID": 1,
"name": "lassi",
"price": 65,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 1
},
{
"orderID": 2,
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"productID": 1,
"name": "lassi",
"price": 65,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 3
}
]
Here if the orderID is same for the object I want to merge those object into a single object and create the product information into an array of an object within the main array
Here is the output which I am looking for
"orders": [
{
"orderID": 1,
"fullName": "xyz",
"email": "xyz#gmail.com",
"phone": "12345",
"flatNo": "A-5",
"complex": "tara tra",
"landmark": null,
"street": null,
"area": "",
"city": "",
"products": [
{
"productID": 2,
"name": "curd",
"price": 52,
"image": "curd.png",
"quantity": 1
},
{
"productID": 1,
"name": "lassi",
"price": 65,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 1
}
]
},
{
"orderID": 2,
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"productID": 1,
"name": "lassi",
"price": 65,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 3
}
]
basically I want to combine product information if the order ID is the same.

You'll have an easy time if you use my library for this.
const data = { orders: [ { "orderID": 1, "fullName": "xyz", "email": "xyz#gmail.com", "phone": "12345", "flatNo": "A-5", "complex": "tara tra", "landmark": null, "street": null, "area": "", "city": "", "productID": 2, "name": "curd", "price": 52, "image": "curd.png", "quantity": 1 }, { "orderID": 1, "fullName": "xyz", "email": "xyz#gmail.com", "phone": "12345", "flatNo": "A-5", "complex": "tara tra", "landmark": null, "street": null, "area": "", "city": "", "productID": 1, "name": "lassi", "price": 65, "image": "images\\rtoRAOwj4-conn.PNG", "quantity": 1 }, { "orderID": 2, "fullName": "velocity", "email": "velocity#gmail.com", "phone": "999999", "flatNo": "b-863", "complex": "tara tra", "landmark": "kaskd", "street": "asdasd", "area": "rob city", "city": "asda", "productID": 1, "name": "lassi", "price": 65, "image": "images\\rtoRAOwj4-conn.PNG", "quantity": 3 } ] }
const { pipe, assign, reduce, get, pick, omit } = rubico
const productKeys = ['productID', 'name', 'price', 'image', 'quantity']
const addOrderToMap = (m, order) => {
if (m.has(order.orderID)) {
m.get(order.orderID).products.push(pick(productKeys)(order))
} else {
m.set(order.orderID, {
...omit(productKeys)(order),
products: [pick(productKeys)(order)],
})
}
return m
}
const groupedByOrderID = assign({
orders: pipe([ // assign orders key
get('orders'), // data => orders
reduce(addOrderToMap, new Map()), // orders => Map { orderID -> orderWithProducts }
m => m.values(), // Map { orderID -> orderWithProducts } -> iterator { orderWithProducts }
Array.from, // iterator { orderWithProducts } -> [orderWithProducts]
]),
})(data)
console.log(groupedByOrderID)
<script src="https://unpkg.com/rubico/index.js"></script>
I've commented the code for you, here's the tour if you'd like to learn more.

Just in case if you want to do it through plain JavaScript you can make use of reduce:
var data=[ { "orderID": 1, "fullName": "xyz", "email": "xyz#gmail.com", "phone": "12345", "flatNo": "A-5", "complex": "tara tra", "landmark": null, "street": null, "area": "", "city": "", "productID": 2, "name": "curd", "price": 52, "image": "curd.png", "quantity": 1 }, { "orderID": 1, "fullName": "xyz", "email": "xyz#gmail.com", "phone": "12345", "flatNo": "A-5", "complex": "tara tra", "landmark": null, "street": null, "area": "", "city": "", "productID": 1, "name": "lassi", "price": 65, "image": "images\\rtoRAOwj4-conn.PNG", "quantity": 1 }, { "orderID": 2, "fullName": "velocity", "email": "velocity#gmail.com", "phone": "999999", "flatNo": "b-863", "complex": "tara tra", "landmark": "kaskd", "street": "asdasd", "area": "rob city", "city": "asda", "productID": 1, "name": "lassi", "price": 65, "image": "images\\rtoRAOwj4-conn.PNG", "quantity": 3 } ];
var result = Object.values(data.reduce((acc, {productID, name, price,image, quantity, ...rest})=>{
acc[rest.orderID] = acc[rest.orderID] || {...rest, products:[]};
acc[rest.orderID].products.push({productID, name, price,image, quantity});
return acc;
},{}));
console.log(result);

filter array of objects with dates

I am trying to fetch the data and store into 2 separate arrays from given below array of objects which meet following two conditions
From the current Array of objects, I want to only get the objects whose month is the current month.
another array for past 7 days
How can I do soo?
can I get any tip to work with dates as I am not soo good with it?
{
"status": "success",
"results": 10,
"orders": [
{
"orderID": 1,
"orderStatus": 1,
"purAmt": 1000,
"orderDate": "2020-06-14T03:23:20.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 1,
"name": "lassi",
"price": 62,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 5
},
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 9
}
]
},
{
"orderID": 2,
"orderStatus": 1,
"purAmt": 1000,
"orderDate": "2020-06-14T03:24:32.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 6,
"name": "chicken chilly",
"price": 65,
"image": "images\\PIwc5RQ7s-conn2.PNG",
"quantity": 1
},
{
"productID": 7,
"name": "buteer flyyy",
"price": 70,
"image": "images\\GvIgYj-lO-conn2.PNG",
"quantity": 2
}
]
},
{
"orderID": 4,
"orderStatus": 1,
"purAmt": 250,
"orderDate": "2020-06-15T09:04:45.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 1,
"name": "lassi",
"price": 62,
"image": "images\\rtoRAOwj4-conn.PNG",
"quantity": 1
},
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 5,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-05-15T10:33:59.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 6,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-06-15T10:41:53.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 7,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-06-15T10:44:58.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 8,
"orderStatus": 2,
"purAmt": 250,
"orderDate": "2020-06-15T11:00:57.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
},
{
"orderID": 9,
"orderStatus": 1,
"purAmt": 250,
"orderDate": "2020-06-15T11:01:50.000Z",
"fullName": "velocity",
"email": "velocity#gmail.com",
"phone": "999999",
"flatNo": "b-863",
"complex": "tara tra",
"landmark": "kaskd",
"street": "asdasd",
"area": "rob city",
"city": "asda",
"products": [
{
"productID": 2,
"name": "curd",
"price": 55,
"image": "curd.png",
"quantity": 1
}
]
}
]
}

The Date object here will help a lot. To get orders this month you could try something like:
orders.filter(order => {
const orderDate = new Date(order.orderDate);
const today = new Date();
const isThisYear = orderDate.getFullYear() === today.getFullYear()
const isThisMonth = orderDate.getMonth() === today.getMonth();
return isThisYear && isThisMonth;
})
And to get in the last 7 days you could try something like:
orders.filter(order => {
const orderDate = Date.parse(order.orderDate); // in milliseconds
const today = Date.now(); // in milliseconds
const millisecondsInAWeek = 604800000;
return orderDate > today - millisecondsInAWeek;
})

How to display city name using coordinates with google map API using Jquery and Json API?

I want to display user info containing (name, username, city name, etc), if u click the username I want to display user info eg name, username, last name, CITY(using coordinates) using google API, when u click the username the window should pop up and display that info with static map together,
is it possible to achieve that? if so can you provide some tutorial or script to do that?
Note: I am a newbie I dont know even where to start with this problem,
Here is what I have done so far :
var data = [{ "id": 987, "username": "jstephensre", "active": false, "password": "8de90ec658d72b54ef0b270611ef9eb6241fa59b77b5c98b9bffb4fd631a4b10", "first_name": "Johnny", "last_name": "Stephens", "last_login": "6/7/2016", "email": "jstephensre#opensource.org", "avatar": "https://robohash.org/nihilpariaturrepudiandae.jpg?size=50x50&set=set1", "gender": [], "favorites": { "book-isbn": "117187617-3", "color": "#6adf06", "drugs": ["Zicam Cold Remedy Ultra Rapidmelts", "BUTALBITAL, ACETAMINOPHEN AND CAFFEINE"] }, "coordinates": { "lat": "8.65972", "lng": "-75.12809" } },
{ "id": 988, "username": "dtorresrf", "active": true, "password": "443f2261332613a2da952d05a25ceec2d8eb9ed177ce830b3b4d6fbbe536e2c0", "first_name": null, "last_name": "Torres", "last_login": null, "email": "atorresrf#facebook.com", "avatar": "https://robohash.org/idnihilut.bmp?size=50x50&set=set1", "gender": ["Female", "Female"], "favorites": { "book-isbn": null, "color": "#a04fce", "drugs": ["Cockroach, American", "Lisinopril and Hydrochlorothiazide"] }, "coordinates": { "lat": "9.86667", "lng": "6.71667" } },
{ "id": 989, "username": "jsmithrg", "active": false, "password": "4e9750746ad03f82717ebd702c03c92749de1cbc820798ab409fb5e6760101ad", "first_name": null, "last_name": "Smith", "last_login": null, "email": "tsmithrg#creativecommons.org", "avatar": null, "gender": ["Male"], "favorites": { "book-isbn": null, "color": "#3bff1e", "drugs": ["Yellow Pine", "Meprobamate", "GenRx Daily Defense Antifungal"] }, "coordinates": { "lat": "-16.00528", "lng": "-41.29722" } },
{ "id": 990, "username": "sroserh", "active": false, "password": "ab83a77062c8ee868f3b966d50a8ee39f63e3cec81349b83b81adcd3c6fa5da3", "first_name": "Sarah", "last_name": null, "last_login": "12/19/2015", "email": "sromerorh#about.me", "avatar": null, "gender": [], "favorites": { "book-isbn": "117541910-9", "color": "#ac8603", "drugs": ["MORUS ALBA POLLEN", "enema", "Altipres-B"] }, "coordinates": { "lat": "32.26616", "lng": "35.00893" } },
{ "id": 991, "username": "sholmesri", "active": false, "password": "11802fc53531079cdf8033e6772ffc5ac47c8ea8a453b66e8ac8df9ae29d9543", "first_name": "Susan", "last_name": "Holmes", "last_login": "1/28/2016", "email": "sholmesri#mozilla.com", "avatar": "https://robohash.org/doloreshicqui.png?size=50x50&set=set1", "gender": ["Male", "Male"], "favorites": { "book-isbn": "658583882-3", "color": "#04da21", "drugs": ["Tempra", "Estradiol Transdermal System"] }, "coordinates": { "lat": "-39.23686", "lng": "-70.9197" } },
{ "id": 992, "username": "rhayesrj", "active": true, "password": "beae358b1eb873bac4fa640410520157f26738ee4d2de1144f30101c6af8e259", "first_name": "Rachel", "last_name": "Hayes", "last_login": "12/7/2015", "email": null, "avatar": "https://robohash.org/teneturautest.jpg?size=50x50&set=set1", "gender": ["Male"], "favorites": { "book-isbn": "291847889-X", "color": null, "drugs": ["BUDESONIDE", "Doxorubicin Hydrochloride", "Hydrocodone Bitartrate and Acetaminophen"] }, "coordinates": { "lat": "-20.58333", "lng": "48.53333" } },
{ "id": 993, "username": "jcampbellrk", "active": false, "password": "9602ccbe7599aefea9a25eb05ab2ede44302f57fd153bad07aa0f5a2f46be537", "first_name": "Joan", "last_name": "Campbell", "last_login": "8/29/2016", "email": "jcampbellrk#bravesites.com", "avatar": "https://robohash.org/numquamutquae.png?size=50x50&set=set1", "gender": ["Male"], "favorites": { "book-isbn": "588841638-X", "color": "#7c5963", "drugs": [] }, "coordinates": { "lat": "57.6531", "lng": "14.6968" } },
{ "id": 994, "username": "ejamesrl", "active": false, "password": "55b1d2418621cda82225bf569f5f30c5b5fcfe5ae7aef6b1e3418a97335b47ab", "first_name": "Elizabeth", "last_name": "James", "last_login": "1/14/2016", "email": "ejamesrl#geocities.jp", "avatar": null, "gender": ["Female"], "favorites": { "book-isbn": "026417147-0", "color": "#ba1d5c", "drugs": ["Losartan Potassium and Hydrochlorothiazide", "Ramipril"] }, "coordinates": { "lat": "54.64043", "lng": "32.87811" } },
{ "id": 995, "username": "krogersrm", "active": true, "password": "c5a8921245a345fb133193f8ceb14021469b4f42a7d945e835b9497081fb7130", "first_name": "Kathleen", "last_name": null, "last_login": "6/13/2016", "email": "khansenrm#nationalgeographic.com", "avatar": "https://robohash.org/mollitiasuscipitmagnam.jpg?size=50x50&set=set1", "gender": ["Male"], "favorites": { "book-isbn": "636138809-3", "color": "#1c858e", "drugs": ["Tramadol Hydrochloride", "iBlanc Restora-Bright"] }, "coordinates": { "lat": "12.71402", "lng": "121.51242" } },
{ "id": 996, "username": "sperkinsrn", "active": false, "password": "c0f48289a4145ffd34374f7236ea4e650df57cff11f4f77b865a44dde410cfb8", "first_name": "Sarah", "last_name": "Perkins", "last_login": "8/31/2016", "email": null, "avatar": "https://robohash.org/consequaturculpavelit.png?size=50x50&set=set1", "gender": ["Male", "Male"], "favorites": { "book-isbn": "561211079-0", "color": null, "drugs": ["Caduet"] }, "coordinates": { "lat": "43.30472", "lng": "124.32778" } },
{ "id": 997, "username": "jlanero", "active": false, "password": "0430117ff30143b0f3727527f62346351582a396cc60a5bf599e674cc34c07c5", "first_name": "Jack", "last_name": "Lane", "last_login": "3/20/2016", "email": null, "avatar": null, "gender": [], "favorites": { "book-isbn": "819102101-3", "color": null, "drugs": ["RIFAMPIN"] }, "coordinates": { "lat": "51.8796", "lng": "4.5059" } },
{ "id": 998, "username": "wroserp", "active": true, "password": "626e6d1a1a92ff6e741ae21e3bbbae265000ca0f87306590c2344d4130dd57a9", "first_name": "Willie", "last_name": "Rose", "last_login": "10/16/2016", "email": null, "avatar": null, "gender": ["Male"], "favorites": { "book-isbn": "108540866-3", "color": null, "drugs": ["OXYGEN", "Garnier Fructis Antidandruff"] }, "coordinates": { "lat": "57.58167", "lng": "83.76917" } },
{ "id": 999, "username": "sphillipsrq", "active": false, "password": "de0a87749bb04b2630ac6dbeb7259947383189afb6c2b458d80a15f6881b0439", "first_name": "Stephanie", "last_name": "Phillips", "last_login": "11/24/2016", "email": "sphillipsrq#wikia.com", "avatar": "https://robohash.org/laborerepellendustemporibus.jpg?size=50x50&set=set1", "gender": [], "favorites": { "book-isbn": "721916787-3", "color": "#9eee74", "drugs": [] }, "coordinates": { "lat": "51.0016", "lng": "21.71474" } },
{ "id": 1000, "username": "phicksrr", "active": false, "password": "2a27d007956e55da298aa3fb427a5a8ed7a8d661f4d4a2e340a98026996521eb", "first_name": "Phyllis", "last_name": "Hicks", "last_login": "2/14/2016", "email": null, "avatar": "https://robohash.org/sedsednon.bmp?size=50x50&set=set1", "gender": ["Female", "Female"], "favorites": { "book-isbn": "268196481-4", "color": null, "drugs": ["Ibuprofen"] }, "coordinates": { "lat": "-6.22625", "lng": "106.0253" } }];
var output = '<ul>';
$.each(data, function(key, val) {
//check the user if is active then display the active users
if(val['active'] == true)
{
output += '<li>'<a href= + val.avatar + " " + val.first_name + " " + val.last_name + " " + val.coordinates " " + val.username +'</a></li>';
}
});

Please try with the below code. I have made some code for you to start.
var data = [{
"id": 987,
"username": "jstephensre",
"active": false,
"password": "8de90ec658d72b54ef0b270611ef9eb6241fa59b77b5c98b9bffb4fd631a4b10",
"first_name": "Johnny",
"last_name": "Stephens",
"last_login": "6/7/2016",
"email": "jstephensre#opensource.org",
"avatar": "https://robohash.org/nihilpariaturrepudiandae.jpg?size=50x50&set=set1",
"gender": [],
"favorites": {
"book-isbn": "117187617-3",
"color": "#6adf06",
"drugs": ["Zicam Cold Remedy Ultra Rapidmelts", "BUTALBITAL, ACETAMINOPHEN AND CAFFEINE"]
},
"coordinates": {
"lat": "8.65972",
"lng": "-75.12809"
}
},
{
"id": 988,
"username": "dtorresrf",
"active": true,
"password": "443f2261332613a2da952d05a25ceec2d8eb9ed177ce830b3b4d6fbbe536e2c0",
"first_name": null,
"last_name": "Torres",
"last_login": null,
"email": "atorresrf#facebook.com",
"avatar": "https://robohash.org/idnihilut.bmp?size=50x50&set=set1",
"gender": ["Female", "Female"],
"favorites": {
"book-isbn": null,
"color": "#a04fce",
"drugs": ["Cockroach, American", "Lisinopril and Hydrochlorothiazide"]
},
"coordinates": {
"lat": "9.86667",
"lng": "6.71667"
}
},
{
"id": 989,
"username": "jsmithrg",
"active": false,
"password": "4e9750746ad03f82717ebd702c03c92749de1cbc820798ab409fb5e6760101ad",
"first_name": null,
"last_name": "Smith",
"last_login": null,
"email": "tsmithrg#creativecommons.org",
"avatar": null,
"gender": ["Male"],
"favorites": {
"book-isbn": null,
"color": "#3bff1e",
"drugs": ["Yellow Pine", "Meprobamate", "GenRx Daily Defense Antifungal"]
},
"coordinates": {
"lat": "-16.00528",
"lng": "-41.29722"
}
},
{
"id": 990,
"username": "sroserh",
"active": false,
"password": "ab83a77062c8ee868f3b966d50a8ee39f63e3cec81349b83b81adcd3c6fa5da3",
"first_name": "Sarah",
"last_name": null,
"last_login": "12/19/2015",
"email": "sromerorh#about.me",
"avatar": null,
"gender": [],
"favorites": {
"book-isbn": "117541910-9",
"color": "#ac8603",
"drugs": ["MORUS ALBA POLLEN", "enema", "Altipres-B"]
},
"coordinates": {
"lat": "32.26616",
"lng": "35.00893"
}
},
{
"id": 991,
"username": "sholmesri",
"active": false,
"password": "11802fc53531079cdf8033e6772ffc5ac47c8ea8a453b66e8ac8df9ae29d9543",
"first_name": "Susan",
"last_name": "Holmes",
"last_login": "1/28/2016",
"email": "sholmesri#mozilla.com",
"avatar": "https://robohash.org/doloreshicqui.png?size=50x50&set=set1",
"gender": ["Male", "Male"],
"favorites": {
"book-isbn": "658583882-3",
"color": "#04da21",
"drugs": ["Tempra", "Estradiol Transdermal System"]
},
"coordinates": {
"lat": "-39.23686",
"lng": "-70.9197"
}
},
{
"id": 992,
"username": "rhayesrj",
"active": true,
"password": "beae358b1eb873bac4fa640410520157f26738ee4d2de1144f30101c6af8e259",
"first_name": "Rachel",
"last_name": "Hayes",
"last_login": "12/7/2015",
"email": null,
"avatar": "https://robohash.org/teneturautest.jpg?size=50x50&set=set1",
"gender": ["Male"],
"favorites": {
"book-isbn": "291847889-X",
"color": null,
"drugs": ["BUDESONIDE", "Doxorubicin Hydrochloride", "Hydrocodone Bitartrate and Acetaminophen"]
},
"coordinates": {
"lat": "-20.58333",
"lng": "48.53333"
}
},
{
"id": 993,
"username": "jcampbellrk",
"active": false,
"password": "9602ccbe7599aefea9a25eb05ab2ede44302f57fd153bad07aa0f5a2f46be537",
"first_name": "Joan",
"last_name": "Campbell",
"last_login": "8/29/2016",
"email": "jcampbellrk#bravesites.com",
"avatar": "https://robohash.org/numquamutquae.png?size=50x50&set=set1",
"gender": ["Male"],
"favorites": {
"book-isbn": "588841638-X",
"color": "#7c5963",
"drugs": []
},
"coordinates": {
"lat": "57.6531",
"lng": "14.6968"
}
},
{
"id": 994,
"username": "ejamesrl",
"active": false,
"password": "55b1d2418621cda82225bf569f5f30c5b5fcfe5ae7aef6b1e3418a97335b47ab",
"first_name": "Elizabeth",
"last_name": "James",
"last_login": "1/14/2016",
"email": "ejamesrl#geocities.jp",
"avatar": null,
"gender": ["Female"],
"favorites": {
"book-isbn": "026417147-0",
"color": "#ba1d5c",
"drugs": ["Losartan Potassium and Hydrochlorothiazide", "Ramipril"]
},
"coordinates": {
"lat": "54.64043",
"lng": "32.87811"
}
},
{
"id": 995,
"username": "krogersrm",
"active": true,
"password": "c5a8921245a345fb133193f8ceb14021469b4f42a7d945e835b9497081fb7130",
"first_name": "Kathleen",
"last_name": null,
"last_login": "6/13/2016",
"email": "khansenrm#nationalgeographic.com",
"avatar": "https://robohash.org/mollitiasuscipitmagnam.jpg?size=50x50&set=set1",
"gender": ["Male"],
"favorites": {
"book-isbn": "636138809-3",
"color": "#1c858e",
"drugs": ["Tramadol Hydrochloride", "iBlanc Restora-Bright"]
},
"coordinates": {
"lat": "12.71402",
"lng": "121.51242"
}
},
{
"id": 996,
"username": "sperkinsrn",
"active": false,
"password": "c0f48289a4145ffd34374f7236ea4e650df57cff11f4f77b865a44dde410cfb8",
"first_name": "Sarah",
"last_name": "Perkins",
"last_login": "8/31/2016",
"email": null,
"avatar": "https://robohash.org/consequaturculpavelit.png?size=50x50&set=set1",
"gender": ["Male", "Male"],
"favorites": {
"book-isbn": "561211079-0",
"color": null,
"drugs": ["Caduet"]
},
"coordinates": {
"lat": "43.30472",
"lng": "124.32778"
}
},
{
"id": 997,
"username": "jlanero",
"active": false,
"password": "0430117ff30143b0f3727527f62346351582a396cc60a5bf599e674cc34c07c5",
"first_name": "Jack",
"last_name": "Lane",
"last_login": "3/20/2016",
"email": null,
"avatar": null,
"gender": [],
"favorites": {
"book-isbn": "819102101-3",
"color": null,
"drugs": ["RIFAMPIN"]
},
"coordinates": {
"lat": "51.8796",
"lng": "4.5059"
}
},
{
"id": 998,
"username": "wroserp",
"active": true,
"password": "626e6d1a1a92ff6e741ae21e3bbbae265000ca0f87306590c2344d4130dd57a9",
"first_name": "Willie",
"last_name": "Rose",
"last_login": "10/16/2016",
"email": null,
"avatar": null,
"gender": ["Male"],
"favorites": {
"book-isbn": "108540866-3",
"color": null,
"drugs": ["OXYGEN", "Garnier Fructis Antidandruff"]
},
"coordinates": {
"lat": "57.58167",
"lng": "83.76917"
}
},
{
"id": 999,
"username": "sphillipsrq",
"active": false,
"password": "de0a87749bb04b2630ac6dbeb7259947383189afb6c2b458d80a15f6881b0439",
"first_name": "Stephanie",
"last_name": "Phillips",
"last_login": "11/24/2016",
"email": "sphillipsrq#wikia.com",
"avatar": "https://robohash.org/laborerepellendustemporibus.jpg?size=50x50&set=set1",
"gender": [],
"favorites": {
"book-isbn": "721916787-3",
"color": "#9eee74",
"drugs": []
},
"coordinates": {
"lat": "51.0016",
"lng": "21.71474"
}
},
{
"id": 1000,
"username": "phicksrr",
"active": false,
"password": "2a27d007956e55da298aa3fb427a5a8ed7a8d661f4d4a2e340a98026996521eb",
"first_name": "Phyllis",
"last_name": "Hicks",
"last_login": "2/14/2016",
"email": null,
"avatar": "https://robohash.org/sedsednon.bmp?size=50x50&set=set1",
"gender": ["Female", "Female"],
"favorites": {
"book-isbn": "268196481-4",
"color": null,
"drugs": ["Ibuprofen"]
},
"coordinates": {
"lat": "-6.22625",
"lng": "106.0253"
}
}
];
var output = '<ul>';
$(document).ready(function() {
$.each(data, function(key, val) {
//check the user if is active then display the active users
if (val['active'] == true) {
output += "<li><a href='#' onclick='getAddress(\"" + val.username + "\"," + val.coordinates.lat + "," + val.coordinates.lng + ")'>First Name: " + val.first_name + ",Last Name: " + val.last_name + ", Username: " + val.username + ",Lat: " + val.coordinates.lat + ",Lng: " + val.coordinates.lng + "</a></li>";
}
});
$("#userList").html(output);
});
function getAddress(username, latitude, longitude) {
var lat = latitude; //pass latitude value..
var lng = longitude; //pass longitude value..
$.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lng + "&sensor=true", function(json) {
//result contains json
var address = json.results[0].formatted_address;
$("#userDetails").html("<b>UserName:</b> " + username + "<br/><b>Address: </b>" + address);
});
}
#userList {
border: 1px solid blue;
}
#userDetails {
background-color: lightblue;
padding:5px;
}
a{
text-decoration:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="userList">
</div>
<br/>
<div id="userDetails">
</div>

Loop through json data in Handlebars

On the handlebars website I can see how to loop through an array but I'm trying to look through an array object and having no luck.
Here's my data, which I am getting back using jquery and a jsonp command.
[
{
"id": 95,
"user_id": 6,
"status": 1,
"name": "Lost & Co",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "London",
"venue": "Lost & Co",
"fsqid": "512fb191e4b0f660fda426eb",
"address": "160 Putney High Street",
"postcode": null,
"lat": "51.461322924772",
"lng": "-0.21689196269354",
"phone": "+442087802235",
"description": null,
"date": "2014-05-10",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 12:20:09",
"updated_at": "2014-04-24 12:20:09"
},
{
"id": 96,
"user_id": 6,
"status": 1,
"name": "Lost & Co",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "London",
"venue": "Lost & Co",
"fsqid": "512fb191e4b0f660fda426eb",
"address": "160 Putney High Street",
"postcode": null,
"lat": "51.461322924772",
"lng": "-0.21689196269354",
"phone": "+442087802235",
"description": null,
"date": "2014-05-24",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 12:20:57",
"updated_at": "2014-04-24 12:20:57"
},
{
"id": 94,
"user_id": 6,
"status": 1,
"name": "Lost Society",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "London",
"venue": "Lost Society",
"fsqid": "4bbcf543593fef3b35de0256",
"address": "697 Wandsworth Rd",
"postcode": "SW8 3JF",
"lat": "51.467991033249",
"lng": "-0.14425992965698",
"phone": "+442076526526",
"description": null,
"date": "2014-05-31",
"time": "",
"image": null,
"image_thumb": null,
"website": "http://www.lostsociety.co.uk/index2.html",
"twitter": "lostsocietybar",
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 12:18:53",
"updated_at": "2014-04-24 12:18:53"
},
{
"id": 97,
"user_id": 6,
"status": 1,
"name": "Campus North",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "Newcastle",
"venue": "Campus North",
"fsqid": "533b05b0498ea89103652747",
"address": "5 Carliol Square",
"postcode": null,
"lat": "54.973037719727",
"lng": "-1.6087431907654",
"phone": null,
"description": null,
"date": "2014-06-12",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-24 17:56:26",
"updated_at": "2014-04-24 17:55:55"
},
{
"id": 91,
"user_id": 6,
"status": 1,
"name": "Glastonbury",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "Pilton",
"venue": "Glastonbury",
"fsqid": null,
"address": null,
"postcode": null,
"lat": null,
"lng": null,
"phone": null,
"description": null,
"date": "2014-06-28",
"time": "",
"image": null,
"image_thumb": null,
"website": "http://www.glastonburyfestivals.co.uk/",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-22 12:08:32",
"updated_at": "2014-04-22 13:06:51"
},
{
"id": 92,
"user_id": 6,
"status": 1,
"name": "Glastonbury",
"country": {
"code": "GB",
"name": "United Kingdom"
},
"city": "Pilton",
"venue": "Glastonbury",
"fsqid": null,
"address": null,
"postcode": null,
"lat": null,
"lng": null,
"phone": null,
"description": null,
"date": "2014-06-29",
"time": "",
"image": null,
"image_thumb": null,
"website": "http://www.glastonburyfestivals.co.uk/",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-04-22 12:08:46",
"updated_at": "2014-04-22 13:07:27"
},
{
"id": 80,
"user_id": 6,
"status": 1,
"name": "TBA",
"country": {
"code": "ES",
"name": "Spain"
},
"city": "Ibiza",
"venue": "TBA",
"fsqid": "51fab9b1498e0ced82ae61d0",
"address": "Mediterranean Sea",
"postcode": null,
"lat": "38.970107",
"lng": "1.305714",
"phone": null,
"description": null,
"date": "2014-09-12",
"time": "",
"image": null,
"image_thumb": null,
"website": "",
"twitter": null,
"tickets": "",
"fb_event": null,
"created_at": "2014-02-27 00:41:49",
"updated_at": "2014-02-27 00:41:49"
}
]
I was trying this but it's not working. Have I missed something obvious?
<ul>
{{#each}}
<li>
<h3>{{ venue }}</h3>
</li>
{{/each}}
</ul>

You need to provide a context to that #each:
{{#each .}}
<li>
<h3>{{ venue }}</h3>
</li>
{{/each}}
All you're missing is that you need to let handlebars know that it's the root object as such that you want to iterate over.