Related
can we group array of objects in multilevel. This is my array of objects with common date and places, but different timings.
[
{
"ID": 2104221,
"date": "2022-11-18T00:00:00",
"day": "18",
"weekDay": "Fri",
"month": "Nov",
"Placeid": 2293,
"Place": "AAAAAA",
"address": "25 SSSSSS",
"city": "RRRRR",
"state": "WWWW",
"Time": "8:00 PM"
},
{
"ID": 2104344,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 3478,
"Place": "BIG",
"address": "1433 The ADDDD,",
"city": "CA",
"state": "",
"zipCode": "95126",
"Time": "03:00 PM"
},
{
"ID": 2104345,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 3478,
"Place": "BIG",
"address": "1433 The ADDDD,",
"city": "CA",
"state": "",
"zipCode": "95126",
"Time": "06:00 PM"
},
{
"ID": 2104346,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 3478,
"Place": "BIG",
"address": "1433 The ADDDD,",
"city": "CA",
"state": "",
"zipCode": "95126",
"Time": "09:00 PM"
},
{
"ID": 2104347,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 2464,
"Place": "ATheaters",
"address": "2901 Capital",
"city": "C",
"state": "TT",
"Time": "06:00 PM"
},
{
"ID": 2104348,
"date": "2022-11-15T00:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 2464,
"Place": "ATheaters",
"address": "2901 Capital",
"city": "ANNNN",
"state": "TT",
"Time": "10:00 PM"
},
{
"ID": 2103857,
"date": "2022-11-05T16:30:00",
"day": "5",
"weekDay": "Sat",
"month": "Nov",
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"state": "YYYYY",
"Time": " 4:30 PM"
},
{
"ID": 2103858,
"date": "2022-11-05T23:30:00",
"day": "5",
"weekDay": "Sat",
"month": "Nov",
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"state": "YYYYY",
"Time": "11:30 PM"
},
{
"ID": 2103862,
"date": "2022-11-15T23:00:00",
"day": "15",
"weekDay": "Tue",
"month": "Nov",
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"state": "YYYYY",
"Time": "11:00 PM"
}
]
I would like to group based on day and places. my desired output will be
[
{
"day": "18",
"date": "2022-11-18T00:00:00",
"weekDay": "Fri",
"month": "Nov",
"Places": [
{
"Placeid": 2293,
"Place": "AAAAAA",
"address": "25 SSSSSS",
"city": "RRRRR",
"state": "WWWW",
"Timings": [
{
"ID": 2104221,
"Time": "8:00 PM"
}
]
}
]
},
{
"day": "15",
"date": "2022-11-15T23:00:00",
"weekDay": "Tue",
"month": "Nov",
"Places": [
{
"Placeid": 3478,
"Place": "BIG",
"address": "1433 The ADDDD,",
"city": "CA",
"state": "",
"Timings": [
{
"ID": 2104344,
"Time": "03:00 PM"
},
{
"ID": 2104345,
"Time": "06:00 PM"
},
{
"ID": 2104346,
"Time": "09:00 PM"
}
]
},
{
"Placeid": 2464,
"Place": "ATheaters",
"address": "2901 Capital",
"city": "ANNNN",
"state": "TT",
"Timings": [
{
"ID": 2104347,
"Time": "06:00 PM"
},
{
"ID": 2104348,
"Time": "10:00 PM"
}
]
},
{
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"Timings": [
{
"ID": 2103862,
"Time": "11:00 PM"
}
]
}
]
},
{
"day": "5",
"date": "2022-11-05T16:30:00",
"weekDay": "Sat",
"month": "Nov",
"Places": [
{
"Placeid": 34771,
"Place": "Playhouse",
"address": "525 Palace",
"city": "BBBB",
"state": "YYYYY",
"Timings": [
{
"ID": 2103857,
"Time": " 4:30 PM"
},
{
"ID": 2103858,
"Time": "11:30 PM"
}
]
}
]
}
]
Is it possible to group like this using javascript? i tried with below code to group. but i didnt get my desired output.
const MultiLevelGrouping=(data,['day','Placeid'])=>{
var getEmpty = () => ({ _: [] }),
result = data
.reduce((q, o) => {
groups
.reduce((r, k) => {
const v = o[k];
if (!v) return r;
if (!r[v]) r._.push({ [k]: v, [k + 'Detail']: (r[v] = getEmpty())._ });
return r[v];
}, q)
._
.push(o);
return q;
}, getEmpty())
._;
return result;
}
Can Someone help me out ?
You could use 2 mapper objects. One to group each day and another to group each day-place combination. Then create entries in each mapper object if the key doesn't exists yet. Also, push the dayPlaceMap[comboKey] reference to the dayMap[day].Places array o that when the dayPlaceMap is updated, the nested array is updated.
const input = [{ID:2104221,date:"2022-11-18T00:00:00",day:"18",weekDay:"Fri",month:"Nov",Placeid:2293,Place:"AAAAAA",address:"25 SSSSSS",city:"RRRRR",state:"WWWW",Time:"8:00 PM"},{ID:2104344,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"03:00 PM"},{ID:2104345,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"06:00 PM"},{ID:2104346,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"09:00 PM"},{ID:2104347,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:2464,Place:"ATheaters",address:"2901 Capital",city:"C",state:"TT",Time:"06:00 PM"},{ID:2104348,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:2464,Place:"ATheaters",address:"2901 Capital",city:"ANNNN",state:"TT",Time:"10:00 PM"},{ID:2103857,date:"2022-11-05T16:30:00",day:"5",weekDay:"Sat",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:" 4:30 PM"},{ID:2103858,date:"2022-11-05T23:30:00",day:"5",weekDay:"Sat",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:"11:30 PM"},{ID:2103862,date:"2022-11-15T23:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:"11:00 PM"}],
dayMap = {},
dayPlaceMap = {};
for (const { day, date, weekDay, month, Placeid, ID, Time, ...rest } of input) {
dayMap[day] ??= { day, date, weekDay, month, Places: [] };
const comboKey = `${day}|${Placeid}`
if(!dayPlaceMap[comboKey]) {
dayPlaceMap[comboKey] ??= { Placeid, ...rest, Timings: [] }
dayMap[day].Places.push( dayPlaceMap[comboKey] )
}
dayPlaceMap[comboKey].Timings.push({ ID, Time })
}
console.log(Object.values(dayMap))
Here is a one-liner to do it:
const data = [{ID:2104221,date:"2022-11-18T00:00:00",day:"18",weekDay:"Fri",month:"Nov",Placeid:2293,Place:"AAAAAA",address:"25 SSSSSS",city:"RRRRR",state:"WWWW",Time:"8:00 PM"},{ID:2104344,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"03:00 PM"},{ID:2104345,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"06:00 PM"},{ID:2104346,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:3478,Place:"BIG",address:"1433 The ADDDD,",city:"CA",state:"",zipCode:"95126",Time:"09:00 PM"},{ID:2104347,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:2464,Place:"ATheaters",address:"2901 Capital",city:"C",state:"TT",Time:"06:00 PM"},{ID:2104348,date:"2022-11-15T00:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:2464,Place:"ATheaters",address:"2901 Capital",city:"ANNNN",state:"TT",Time:"10:00 PM"},{ID:2103857,date:"2022-11-05T16:30:00",day:"5",weekDay:"Sat",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:" 4:30 PM"},{ID:2103858,date:"2022-11-05T23:30:00",day:"5",weekDay:"Sat",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:"11:30 PM"},{ID:2103862,date:"2022-11-15T23:00:00",day:"15",weekDay:"Tue",month:"Nov",Placeid:34771,Place:"Playhouse",address:"525 Palace",city:"BBBB",state:"YYYYY",Time:"11:00 PM"}]
let r = Object.values(data.reduce((a,
{day, date, weekDay, month})=>(a[`|${day}`]??={day, date, weekDay, month,
Places: Object.values(data.filter(i=>i.day===day).reduce((b, {
Placeid, Place, address, city, state})=>(b[`${day}|${Placeid}`]??={
Placeid, Place, address, city, state,
Timings: data.filter(j=>j.day===day && j.Placeid===Placeid)
.map(j=>({ID: j.ID, Time: j.Time}))}, b), {}))}, a), {}));
console.log(r);
I have a Google maps project that I'm playing around with where I want to get store info in a popup when clicking on the marker. However when I click the marker it says that it 'can't read undefined when reading setContent'.
Can anyone explain why this won't allow my html to be set into the infoWindow?
var map;
var markers = [];
var infoWindow;
var locationSelect;
let stores = [{
"recommendation": {},
"storeNumber": "5758-13907",
"id": "15051",
"name": "La Cienega & Gregory Way",
"phoneNumber": "310-659-9562",
"coordinates": {
"latitude": 34.063584,
"longitude": -118.376354
},
"regulations": [],
"address": {
"streetAddressLine1": "257 S. La Cienega Blvd.",
"streetAddressLine2": null,
"streetAddressLine3": null,
"city": "Beverly Hills",
"countrySubdivisionCode": "CA",
"countryCode": "US",
"postalCode": "902113301"
},
"timeZoneInfo": {
"currentTimeOffset": -420,
"windowsTimeZoneId": "Pacific Standard Time",
"olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
},
"brandName": "Starbucks",
"ownershipTypeCode": "CO",
"open": true,
"openStatusText": "Open until 6:00 PM",
"addressLines": ["257 S. La Cienega Blvd.", "Beverly Hills, CA 90211"],
"mop": {
"ready": false,
"wait": null
},
"schedule": [{
"dayName": "Today",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tomorrow",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Monday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tuesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Wednesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Thursday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Friday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}],
"features": [{
"code": "WA",
"name": "Oven-warmed Food"
}, {
"code": "VS",
"name": "Verismo"
}, {
"code": "CD",
"name": "Mobile Payment"
}, {
"code": "DR",
"name": "Digital Rewards"
}, {
"code": "LB",
"name": "LaBoulange"
}, {
"code": "GO",
"name": "Google Wi-Fi"
}, {
"code": "XO",
"name": "Mobile Order and Pay"
}, {
"code": "MX",
"name": "Music Experience"
}, {
"code": "NB",
"name": "Nitro Cold Brew"
}, {
"code": "BE",
"name": "Blonde Espresso"
}, {
"code": "LU",
"name": "Lunch"
}, {
"code": "PS",
"name": "Playbook Store System"
}, {
"code": "WC",
"name": "Wireless Charging"
}, {
"code": "UE",
"name": "tbd - Uber Eats"
}],
"slug": "la-cienega-gregory-way-257-s-la-cienega-blvd-beverly-hills-ca-902113301-u"
}, {
"recommendation": {},
"storeNumber": "5577-1851",
"id": "14753",
"name": "Fairfax & Olympic",
"phoneNumber": "(323) 634-7845",
"coordinates": {
"latitude": 34.057968,
"longitude": -118.363715
},
"regulations": [],
"address": {
"streetAddressLine1": "6066 West Olympic Boulevard",
"streetAddressLine2": null,
"streetAddressLine3": null,
"city": "Los Angeles",
"countrySubdivisionCode": "CA",
"countryCode": "US",
"postalCode": "900364402"
},
"timeZoneInfo": {
"currentTimeOffset": -420,
"windowsTimeZoneId": "Pacific Standard Time",
"olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
},
"brandName": "Starbucks",
"ownershipTypeCode": "CO",
"open": true,
"openStatusText": "Open until 6:00 PM",
"addressLines": ["6066 West Olympic Boulevard", "Los Angeles, CA 90036"],
"mop": {
"ready": false,
"wait": null
},
"schedule": [{
"dayName": "Today",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tomorrow",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Monday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tuesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Wednesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Thursday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Friday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}],
"features": [{
"code": "WA",
"name": "Oven-warmed Food"
}, {
"code": "VS",
"name": "Verismo"
}, {
"code": "CD",
"name": "Mobile Payment"
}, {
"code": "DR",
"name": "Digital Rewards"
}, {
"code": "LB",
"name": "LaBoulange"
}, {
"code": "GO",
"name": "Google Wi-Fi"
}, {
"code": "XO",
"name": "Mobile Order and Pay"
}, {
"code": "MX",
"name": "Music Experience"
}, {
"code": "NB",
"name": "Nitro Cold Brew"
}, {
"code": "BE",
"name": "Blonde Espresso"
}, {
"code": "LU",
"name": "Lunch"
}, {
"code": "PS",
"name": "Playbook Store System"
}, {
"code": "UE",
"name": "tbd - Uber Eats"
}],
"slug": "fairfax-olympic-6066-west-olympic-boulevard-los-angeles-ca-9003644"
}];
function initMap() {
var losAngeles = {
lat: 34.063380,
lng: -118.358080
};
map = new google.maps.Map(document.getElementById('map'), {
center: losAngeles,
zoom: 11
});
showStoreMarkers();
};
function showStoreMarkers() {
stores.forEach(function(store, index) {
var latlng = new google.maps.LatLng(
store.coordinates.latitude,
store.coordinates.longitude
);
var name = store.name;
var address = store.addressLines[0];
createMarker(latlng, name, address);
});
};
function createMarker(latlng, name, address) {
var html = name;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div id="stores-list" class="stores-list"></div>
</div>
<div class="col-lg-9">
<div id="map"></div>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
This works. Pay attention to how I declared infowindow. Also, pay attention as I started my javascript google api call without a callback.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index2</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow({ zIndex: 900, "maxWidth": 280});
var locationSelect;
let stores = [{
"recommendation": {},
"storeNumber": "5758-13907",
"id": "15051",
"name": "La Cienega & Gregory Way",
"phoneNumber": "310-659-9562",
"coordinates": {
"latitude": 34.063584,
"longitude": -118.376354
},
"regulations": [],
"address": {
"streetAddressLine1": "257 S. La Cienega Blvd.",
"streetAddressLine2": null,
"streetAddressLine3": null,
"city": "Beverly Hills",
"countrySubdivisionCode": "CA",
"countryCode": "US",
"postalCode": "902113301"
},
"timeZoneInfo": {
"currentTimeOffset": -420,
"windowsTimeZoneId": "Pacific Standard Time",
"olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
},
"brandName": "Starbucks",
"ownershipTypeCode": "CO",
"open": true,
"openStatusText": "Open until 6:00 PM",
"addressLines": ["257 S. La Cienega Blvd.", "Beverly Hills, CA 90211"],
"mop": {
"ready": false,
"wait": null
},
"schedule": [{
"dayName": "Today",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tomorrow",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Monday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tuesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Wednesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Thursday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Friday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}],
"features": [{
"code": "WA",
"name": "Oven-warmed Food"
}, {
"code": "VS",
"name": "Verismo"
}, {
"code": "CD",
"name": "Mobile Payment"
}, {
"code": "DR",
"name": "Digital Rewards"
}, {
"code": "LB",
"name": "LaBoulange"
}, {
"code": "GO",
"name": "Google Wi-Fi"
}, {
"code": "XO",
"name": "Mobile Order and Pay"
}, {
"code": "MX",
"name": "Music Experience"
}, {
"code": "NB",
"name": "Nitro Cold Brew"
}, {
"code": "BE",
"name": "Blonde Espresso"
}, {
"code": "LU",
"name": "Lunch"
}, {
"code": "PS",
"name": "Playbook Store System"
}, {
"code": "WC",
"name": "Wireless Charging"
}, {
"code": "UE",
"name": "tbd - Uber Eats"
}],
"slug": "la-cienega-gregory-way-257-s-la-cienega-blvd-beverly-hills-ca-902113301-u"
}, {
"recommendation": {},
"storeNumber": "5577-1851",
"id": "14753",
"name": "Fairfax & Olympic",
"phoneNumber": "(323) 634-7845",
"coordinates": {
"latitude": 34.057968,
"longitude": -118.363715
},
"regulations": [],
"address": {
"streetAddressLine1": "6066 West Olympic Boulevard",
"streetAddressLine2": null,
"streetAddressLine3": null,
"city": "Los Angeles",
"countrySubdivisionCode": "CA",
"countryCode": "US",
"postalCode": "900364402"
},
"timeZoneInfo": {
"currentTimeOffset": -420,
"windowsTimeZoneId": "Pacific Standard Time",
"olsonTimeZoneId": "GMT-08:00 America/Los_Angeles"
},
"brandName": "Starbucks",
"ownershipTypeCode": "CO",
"open": true,
"openStatusText": "Open until 6:00 PM",
"addressLines": ["6066 West Olympic Boulevard", "Los Angeles, CA 90036"],
"mop": {
"ready": false,
"wait": null
},
"schedule": [{
"dayName": "Today",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tomorrow",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Monday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Tuesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Wednesday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Thursday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}, {
"dayName": "Friday",
"hours": "6:00 AM to 6:00 PM",
"open": true,
"holiday": ""
}],
"features": [{
"code": "WA",
"name": "Oven-warmed Food"
}, {
"code": "VS",
"name": "Verismo"
}, {
"code": "CD",
"name": "Mobile Payment"
}, {
"code": "DR",
"name": "Digital Rewards"
}, {
"code": "LB",
"name": "LaBoulange"
}, {
"code": "GO",
"name": "Google Wi-Fi"
}, {
"code": "XO",
"name": "Mobile Order and Pay"
}, {
"code": "MX",
"name": "Music Experience"
}, {
"code": "NB",
"name": "Nitro Cold Brew"
}, {
"code": "BE",
"name": "Blonde Espresso"
}, {
"code": "LU",
"name": "Lunch"
}, {
"code": "PS",
"name": "Playbook Store System"
}, {
"code": "UE",
"name": "tbd - Uber Eats"
}],
"slug": "fairfax-olympic-6066-west-olympic-boulevard-los-angeles-ca-9003644"
}];
var losAngeles = { lat: 34.063380, lng: -118.358080 };
map = new google.maps.Map(document.getElementById('map'), {
center: losAngeles,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
showStoreMarkers();
function showStoreMarkers() {
stores.forEach(function (store, index) {
var latlng = new google.maps.LatLng(
store.coordinates.latitude,
store.coordinates.longitude
);
var name = store.name;
var address = store.addressLines[0];
createMarker(latlng, name, address);
});
};
function createMarker(latlng, name, address) {
var html = name;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
};
});
</script>
</head>
<body>
<div style="height: 535px; overflow-x: hidden" id="map">hello map1</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div id="stores-list" class="stores-list"></div>
</div>
<div class="col-lg-9">
</div>
</div>
</div>
</body>
</html>
Based on the "Platform" and "Title", I need to de dupe the following object and get the earliest "DateFirstSeen" and latest "DateLastSeen".
Input Object:
[
{
"Platform": "Disney",
"DateFirstSeen": {
"Day": "15",
"Month": "06",
"Year": "2019"
},
"DateLastSeen": {
"Day": "08",
"Month": "02",
"Year": "2021"
},
"Title": "Jojo Rabbit"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Month": "08",
"Year": "2014"
},
"DateLastSeen": {
"Month": "11",
"Year": "2020"
},
"Title": "Stranger Things"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Day": "20",
"Month": "08",
"Year": "2014"
},
"DateLastSeen": {
"Day": "02",
"Month": "03",
"Year": "2020"
},
"Title": "Stranger Things"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Month": "08",
"Year": "2014"
},
"DateLastSeen": {
"Month": "10",
"Year": "2017"
},
"Title": "Stranger Things"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Month": "12",
"Year": "2012"
},
"DateLastSeen": {
"Day": "05",
"Month": "01",
"Year": "2017"
},
"Title": "Stranger Things"
},
{
"Platform": "Hulu",
"DateFirstSeen": {
"Month": "05",
"Year": "2010"
},
"DateLastSeen": {
"Month": "12",
"Year": "2016"
},
"Title": "Watchmen"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Day": "03",
"Month": "04",
"Year": "2015"
},
"DateLastSeen": {
"Day": "03",
"Month": "04",
"Year": "2015"
},
"Title": "Stranger Things"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "20",
"Month": "07",
"Year": "2005"
},
"DateLastSeen": {
"Month": "12",
"Year": "2012"
},
"Title": "See"
},
{
"Platform": "Hulu",
"DateFirstSeen": {
"Month": "01",
"Year": "2012"
},
"DateLastSeen": {
"Month": "01",
"Year": "2012"
},
"Title": "Watchmen"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Month": "09",
"Year": "2003"
},
"DateLastSeen": {
"Month": "02",
"Year": "2009"
},
"Title": "Snoopy Show"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "01",
"Month": "11",
"Year": "2008"
},
"DateLastSeen": {
"Day": "03",
"Month": "12",
"Year": "2008"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Month": "09",
"Year": "2008"
},
"DateLastSeen": {
"Month": "09",
"Year": "2008"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Month": "06",
"Year": "1999"
},
"DateLastSeen": {
"Day": "31",
"Month": "08",
"Year": "2006"
},
"Title": "Snoopy Show"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "12",
"Month": "08",
"Year": "2006"
},
"DateLastSeen": {
"Day": "12",
"Month": "08",
"Year": "2006"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "18",
"Month": "06",
"Year": "2006"
},
"DateLastSeen": {
"Day": "18",
"Month": "06",
"Year": "2006"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Month": "08",
"Year": "2005"
},
"DateLastSeen": {
"Month": "08",
"Year": "2005"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "20",
"Month": "07",
"Year": "2005"
},
"DateLastSeen": {
"Day": "20",
"Month": "07",
"Year": "2005"
},
"Title": "See"
}
]
The desired output is:
[
{
"Platform": "Disney",
"DateFirstSeen": {
"Day": "15",
"Month": "06",
"Year": "2019"
},
"DateLastSeen": {
"Day": "08",
"Month": "02",
"Year": "2021"
},
"Title": "Jojo Rabbit"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Month": "12",
"Year": "2012"
},
"DateLastSeen": {
"Month": "11",
"Year": "2020"
},
"Title": "Stranger Things"
},
{
"Platform": "Hulu",
"DateFirstSeen": {
"Month": "05",
"Year": "2010"
},
"DateLastSeen": {
"Month": "12",
"Year": "2016"
},
"Title": "Watchmen"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "20",
"Month": "07",
"Year": "2005"
},
"DateLastSeen": {
"Month": "12",
"Year": "2012"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Month": "06",
"Year": "1999"
},
"DateLastSeen": {
"Month": "02",
"Year": "2009"
},
"Title": "Snoopy Show"
}
]
I had tried using underscore to get all the unique objects _.uniq but that only gives me the unique values of the platform and the title but misses out on DateFirstSeen and DateLastSeen.
I want to make sure those fields aren't lost in the filtering process.
With the following helper function,
function dayNumber(dateObj) {
var day = _.get(dateObj, 'Day', 1),
month = _.get(dateObj, 'Month'),
year = _.get(dateObj, 'Year');
return year * 372 + month * 31 + +day;
}
The following expression will compute the desired output:
_.chain(data).groupBy('Platform').map(function(platformData, platform) {
return _.chain(platformData).groupBy('Title').map(function(titleData, title) {
var titleChain = _.chain(titleData),
firstSeen = titleChain.map('DateFirstSeen').min(dayNumber),
lastSeen = titleChain.map('DateLastSeen').max(dayNumber);
return {
Platform: platform,
Title: title,
DateFirstSeen: firstSeen.value(),
DateLastSeen: lastSeen.value()
};
}).value();
}).flatten().value();
Let's take this apart.
function dayNumber(dateObj) {
We start by writing a function that takes a date object such as { "Day": "20", "Month": "07", "Year": "2005" } and returns a single number. We need this in order to be able to apply _.min and _.max, which can compute the minimum and the maximum of a collection, respectively.
var day = _.get(dateObj, 'Day', 1),
Inside the dayNumber function, we proceed by taking the parts out of the dateObj. The _.get function lets us specify a fallback value (1 in this case), which comes in handy because not all date objects have a Day property.
month = _.get(dateObj, 'Month'),
year = _.get(dateObj, 'Year');
return year * 372 + month * 31 + +day;
}
With these parts, we calculate an approximation of the number of days since the start of the Western calendar. The value is obviously inaccurate, because we are pretending that every month has 31 days, but it will still get the relative order of the dates right. Note that we use the notation +day in order to coerce the Day property to number. The year and the month are coerced by the fact that we multiply them with a number.
With the dayNumber function in place, we can move on to the big expression.
_.chain(data)
We use _.chain so that we can apply several Underscore functions in succession, each operating on the result of the previous Underscore function. We will see this a few more times in the remainder of the expression.
.groupBy('Platform')
Still on this first line, we first group the data by the Platform property. This creates an object, where each key is a platform name and the corresponding value is the subset of the data from that platform:
{
Disney: [...],
Netflix: [...],
Hulu: [...],
AppleTV: [...]
}
This intermediate result is immediately chained into the next Underscore function:
.map(function(platformData, platform) {
For each pair of platform name and its corresponding data, we will be computing some kind of result and then return all results in an array (see _.map). On the next line, we find ourselves inside the function that will compute one such result.
return _.chain(platformData).groupBy('Title').map(function(titleData, title) {
This line looks strikingly similar to the previous line. Instead of all data, we only group the data for a single platform, and we group them by title. There is a return statement in front, which means that the end result of this chain will also be the computed result for the entire platform.
var titleChain = _.chain(titleData),
We make yet another chain for the subset of data of a single title. We give this chain a name (titleChain), because we will be using it twice.
firstSeen = titleChain.map('DateFirstSeen').min(dayNumber),
lastSeen = titleChain.map('DateLastSeen').max(dayNumber);
We finally get to business! First, we extract all DateFirstSeen properties out of the titleData, and then we take the earliest using _.min and our dayNumber helper function. Similarly, we find the latest DateLastSeen using _.max.
return {
Platform: platform,
Title: title,
DateFirstSeen: firstSeen.value(),
DateLastSeen: lastSeen.value()
};
We have all information complete about this single title, so we recombine the data into a new object. We use _().value to take the results out of our chains.
}).value();
We close the function that computes the result for a single title as well as the call to _.map to which we passed this function. We end the chain that computes the result for a whole platform as well and take its .value(). This is an array of title objects.
}).flatten().value();
Finally, we close the whole expression. We insert a call to _.flatten, because otherwise we'll have an array of arrays instead of just a single flat array.
Note: if we had a guarantee that every title appears on only one platform, we could skip grouping by platform and we wouldn't need to flatten at the end. The code is simpler in this case and also a little bit faster:
_.chain(data).groupBy('Title').map(function(titleData, title) {
var titleChain = _.chain(titleData),
firstSeen = titleChain.map('DateFirstSeen').min(formatAsDate),
lastSeen = titleChain.map('DateLastSeen').max(formatAsDate);
return {
Platform: _.first(titleData).Platform,
Title: title,
DateFirstSeen: firstSeen.value(),
DateLastSeen: lastSeen.value()
};
}).value();
Since we are no longer grouping by platform, we no longer have a platform argument to close over, so we get the platform name using _.first instead. Generally, you can't assume that an array has a first element (since an array may be empty), but here it is safe because groupBy never produces empty groups.
This simpler expression happens to work for your example data, but in general it is probably not safe to assume that every title is unique to a single platform. Your mileage may vary.
const data = [
{
"Platform": "Disney",
"DateFirstSeen": {
"Day": "15",
"Month": "06",
"Year": "2019"
},
"DateLastSeen": {
"Day": "08",
"Month": "02",
"Year": "2021"
},
"Title": "Jojo Rabbit"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Month": "08",
"Year": "2014"
},
"DateLastSeen": {
"Month": "11",
"Year": "2020"
},
"Title": "Stranger Things"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Day": "20",
"Month": "08",
"Year": "2014"
},
"DateLastSeen": {
"Day": "02",
"Month": "03",
"Year": "2020"
},
"Title": "Stranger Things"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Month": "08",
"Year": "2014"
},
"DateLastSeen": {
"Month": "10",
"Year": "2017"
},
"Title": "Stranger Things"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Month": "12",
"Year": "2012"
},
"DateLastSeen": {
"Day": "05",
"Month": "01",
"Year": "2017"
},
"Title": "Stranger Things"
},
{
"Platform": "Hulu",
"DateFirstSeen": {
"Month": "05",
"Year": "2010"
},
"DateLastSeen": {
"Month": "12",
"Year": "2016"
},
"Title": "Watchmen"
},
{
"Platform": "Netflix",
"DateFirstSeen": {
"Day": "03",
"Month": "04",
"Year": "2015"
},
"DateLastSeen": {
"Day": "03",
"Month": "04",
"Year": "2015"
},
"Title": "Stranger Things"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "20",
"Month": "07",
"Year": "2005"
},
"DateLastSeen": {
"Month": "12",
"Year": "2012"
},
"Title": "See"
},
{
"Platform": "Hulu",
"DateFirstSeen": {
"Month": "01",
"Year": "2012"
},
"DateLastSeen": {
"Month": "01",
"Year": "2012"
},
"Title": "Watchmen"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Month": "09",
"Year": "2003"
},
"DateLastSeen": {
"Month": "02",
"Year": "2009"
},
"Title": "Snoopy Show"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "01",
"Month": "11",
"Year": "2008"
},
"DateLastSeen": {
"Day": "03",
"Month": "12",
"Year": "2008"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Month": "09",
"Year": "2008"
},
"DateLastSeen": {
"Month": "09",
"Year": "2008"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Month": "06",
"Year": "1999"
},
"DateLastSeen": {
"Day": "31",
"Month": "08",
"Year": "2006"
},
"Title": "Snoopy Show"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "12",
"Month": "08",
"Year": "2006"
},
"DateLastSeen": {
"Day": "12",
"Month": "08",
"Year": "2006"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "18",
"Month": "06",
"Year": "2006"
},
"DateLastSeen": {
"Day": "18",
"Month": "06",
"Year": "2006"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Month": "08",
"Year": "2005"
},
"DateLastSeen": {
"Month": "08",
"Year": "2005"
},
"Title": "See"
},
{
"Platform": "AppleTV",
"DateFirstSeen": {
"Day": "20",
"Month": "07",
"Year": "2005"
},
"DateLastSeen": {
"Day": "20",
"Month": "07",
"Year": "2005"
},
"Title": "See"
}
];
const result = data.reduce((a,it)=>{
const index = a.map(i=>i.Title).indexOf(it.Title);
if(index===-1){
a.push(it);
}else{
if(a[index].DateLastSeen.Year < it.DateLastSeen.Year || a[index].DateLastSeen.Month < it.DateLastSeen.Month){
a[index].DateLastSeen = it.DateLastSeen;
}
}
return a;
},[])
console.log(result);
I am trying to create a simple app to get a City name and display the weather with yahoo weather API. I am able to make a json request and get the answer but I am completely lost on how to retrieve the information from this json.
I can see the response.query , but when I am trying response.query.something I get undefined. Can someone explain to me how I can get the response.query.results.city thing?
Thanks in advance!!
https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22greenland%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys
{
"query": {
"count": 1,
"created": "2015-11-23T16:18:30Z",
"lang": "vi",
"results": {
"channel": {
"title": "Yahoo! Weather - Greenland, GL",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Greenland__GL/*http://weather.yahoo.com/forecast/GLXX0012_f.html",
"description": "Yahoo! Weather for Greenland, GL",
"language": "en-us",
"lastBuildDate": "Mon, 23 Nov 2015 12:50 pm CGT",
"ttl": "60",
"location": {
"city": "Greenland",
"country": "Greenland",
"region": ""
},
"units": {
"distance": "mi",
"pressure": "in",
"speed": "mph",
"temperature": "F"
},
"wind": {
"chill": "15",
"direction": "220",
"speed": "15"
},
"atmosphere": {
"humidity": "63",
"pressure": "29.8",
"rising": "0",
"visibility": "6.21"
},
"astronomy": {
"sunrise": "10:45 am",
"sunset": "1:33 pm"
},
"image": {
"title": "Yahoo! Weather",
"width": "142",
"height": "18",
"link": "http://weather.yahoo.com",
"url": "http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"
},
"item": {
"title": "Conditions for Greenland, GL at 12:50 pm CGT",
"lat": "71.8",
"long": "-42.18",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Greenland__GL/*http://weather.yahoo.com/forecast/GLXX0012_f.html",
"pubDate": "Mon, 23 Nov 2015 12:50 pm CGT",
"condition": {
"code": "28",
"date": "Mon, 23 Nov 2015 12:50 pm CGT",
"temp": "27",
"text": "Mostly Cloudy"
},
"description": "\n<img src=\"http://l.yimg.com/a/i/us/we/52/28.gif\"/><br />\n<b>Current Conditions:</b><br />\nMostly Cloudy, 27 F<BR />\n<BR /><b>Forecast:</b><BR />\nMon - AM Clouds/PM Sun. High: 29 Low: 17<br />\nTue - Mostly Cloudy. High: 19 Low: 8<br />\nWed - PM Snow Showers. High: 12 Low: 6<br />\nThu - Mostly Cloudy. High: 10 Low: 0<br />\nFri - Mostly Sunny. High: 1 Low: -8<br />\n<br />\nFull Forecast at Yahoo! Weather<BR/><BR/>\n(provided by <a href=\"http://www.weather.com\" >The Weather Channel</a>)<br/>\n",
"forecast": [
{
"code": "30",
"date": "23 Nov 2015",
"day": "Mon",
"high": "29",
"low": "17",
"text": "AM Clouds/PM Sun"
},
{
"code": "28",
"date": "24 Nov 2015",
"day": "Tue",
"high": "19",
"low": "8",
"text": "Mostly Cloudy"
},
{
"code": "14",
"date": "25 Nov 2015",
"day": "Wed",
"high": "12",
"low": "6",
"text": "PM Snow Showers"
},
{
"code": "28",
"date": "26 Nov 2015",
"day": "Thu",
"high": "10",
"low": "0",
"text": "Mostly Cloudy"
},
{
"code": "34",
"date": "27 Nov 2015",
"day": "Fri",
"high": "1",
"low": "-8",
"text": "Mostly Sunny"
}
],
"guid": {
"isPermaLink": "false",
"content": "GLXX0012_2015_11_27_7_00_CGT"
}
}
}
}
}
}
The response you get is a String, not an Object, so you have to Parse it into an Object using JSON.parse(response).
I think you can try PostMan and JSONView, it will help you to test any API easier.
Hope this can help you.
Just found out what I have to do ( hated js list ).
I used dot notation to get my temps.
So just for the record
var response; // here i have the jsonparse thing
//I want to access something I have to do
response.query.results.channel.wind.speed //and i will get wind's speed
If anyone could use the [] notation it would be great.
Thanks for your time .
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I want to parse the Weather API (URL) city name, temperature, etc.
My JSON data is the following:
{
"data": {
"current_condition": [{
"cloudcover": "25",
"humidity": "70",
"observation_time": "04:21 PM",
"precipMM": "0.3",
"pressure": "1007",
"temp_C": "30",
"temp_F": "86",
"visibility": "4",
"weatherCode": "113",
"weatherDesc": [{
"value": "Clear"}],
"weatherIconUrl": [{
"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0008_clear_sky_night.png"}],
"winddir16Point": "S",
"winddirDegree": "180",
"windspeedKmph": "7",
"windspeedMiles": "4"}],
"request": [{
"query": "Ahmedabad, India",
"type": "City"}],
"weather": [{
"date": "2012-09-18",
"precipMM": "2.1",
"tempMaxC": "32",
"tempMaxF": "89",
"tempMinC": "25",
"tempMinF": "76",
"weatherCode": "176",
"weatherDesc": [{
"value": "Patchy rain nearby"}],
"weatherIconUrl": [{
"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0009_light_rain_showers.png"}],
"winddir16Point": "SSW",
"winddirDegree": "203",
"winddirection": "SSW",
"windspeedKmph": "12",
"windspeedMiles": "8"},
{
"date": "2012-09-19",
"precipMM": "3.4",
"tempMaxC": "32",
"tempMaxF": "89",
"tempMinC": "25",
"tempMinF": "76",
"weatherCode": "176",
"weatherDesc": [{
"value": "Patchy rain nearby"}],
"weatherIconUrl": [{
"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0009_light_rain_showers.png"}],
"winddir16Point": "SW",
"winddirDegree": "223",
"winddirection": "SW",
"windspeedKmph": "12",
"windspeedMiles": "7"}]
}
}
How do I parse this data and get city name and temperature..I have no idea..Thanks in adavance.
=============== OutPut =======================
i want to fetch data like this and Set on Textbox
Date 2012-09-18 2012-09-19
tempMaxC 32 32
tempMinC 25 25
tempMaxF 89 89
tempMinF 76 76
If you've retrieved this JSON as a string, then pass this string to JSON.parse()* and then access to retrieved value as to a regular JavaScript object:
var jsonStr = '{ "data": { "current_condition": [ {"cloudcover": "25", "humidity": "70", "observation_time": "04:21 PM", "precipMM": "0.3", "pressure": "1007", "temp_C": "30", "temp_F": "86", "visibility": "4", "weatherCode": "113", "weatherDesc": [ {"value": "Clear" } ], "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0008_clear_sky_night.png" } ], "winddir16Point": "S", "winddirDegree": "180", "windspeedKmph": "7", "windspeedMiles": "4" } ], "request": [ {"query": "Ahmedabad, India", "type": "City" } ], "weather": [ {"date": "2012-09-18", "precipMM": "2.1", "tempMaxC": "32", "tempMaxF": "89", "tempMinC": "25", "tempMinF": "76", "weatherCode": "176", "weatherDesc": [ {"value": "Patchy rain nearby" } ], "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0009_light_rain_showers.png" } ], "winddir16Point": "SSW", "winddirDegree": "203", "winddirection": "SSW", "windspeedKmph": "12", "windspeedMiles": "8" }, {"date": "2012-09-19", "precipMM": "3.4", "tempMaxC": "32", "tempMaxF": "89", "tempMinC": "25", "tempMinF": "76", "weatherCode": "176", "weatherDesc": [ {"value": "Patchy rain nearby" } ], "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0009_light_rain_showers.png" } ], "winddir16Point": "SW", "winddirDegree": "223", "winddirection": "SW", "windspeedKmph": "12", "windspeedMiles": "7" } ] }}',
jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.data.current_condition[0].temp_F);
Otherwise, if you've retrieved this JSON e.g. as a parameter of some jQuery $.ajax() success callback and it's already an object, you don't need to call JSON.parse(), but just retrieve object's values directly:
$.getJSON("http://example.com/weather.json", function(jsonObj) {
// The response string is already parsed with $.parseJSON(),
// so you don't need to parse it yourself.
// Therefore just go ahead and access the properties of JavaScript object.
console.log(jsonObj.data.current_condition[0].temp_F);
});
* If you're intended to support older browsers (e.g. IE7) that does not support JSON.parse/stringify, you'll need to include JSON library.
UPDATE:
DEMO for particular case