Develop Reference

How to parse json with javascript/jquery if content matches string

I currently have a json file of people taking part in a series of charity events in the following format:
[
{
"FirstName": "Anushka",
"Country": "UK",
"Day": "13/10/2017"
},
{
"FirstName": "Alessandra",
"Country": "IT",
"Day": "16/10/2017"
},
{
"FirstName": "Clare",
"Country": "US",
"Day": "13/10/2017"
}
]
I want to build a simple HTML list using this data, so that under each date, the name and country are displayed like:
<div id="13102017">
<h1>13/10/2017</h1>
<div class="col-sm-4"><p>Anushka, UK</p></div>
<div class="col-sm-4"><p>Clare, US</p></div>
</div>
<div id="16102017">
<h1>16/10/2017</h1>
<div class="col-sm-4"><p>Alessandra, IT</p></div>
</div>
I've new to JSON and so far I have figured out how to get Name and Country onto the page, but I cannot figure out how to use an if statement to only output if date = 13/10/2017 for example.
Here's what I've got so far:
$( document ).ready(function() {
$.getJSON("URL_HERE", function(data) {
$.each(data, function(i, item) {
$('#13102017').append('<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>');
});
});
});
Obviously the above is currently just outputting every single name into the #13102017 section. I know I probably need an IF in there somewhere but I'm otherwise stumped. Any pointers would be much appreciated!

On each loop, check first if the date div exists, and if not, create it. Then append the info to that div...
$.getJSON("URL_HERE",function(data) {
$.each(data, function(i,item) {
var dateId = item.Day.replace(/\//g,'');
if (!$('div#'+dateId).length)
$('body').append('<div id="'+dateId+'"><h1>'+item.Day+'</h1></div>');
$('div#'+dateId).append('<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>');
});
});
For array loops, I personally prefer to use for (is faster than jquery each)...
$.getJSON("URL_HERE",function(data) {
for (var i=0, l=data.length; i<l; i++) {
var item = data[i],
dateId = item.Day.replace(/\//g,'');
if (!$('div#'+dateId).length)
$('body').append('<div id="'+dateId+'"><h1>'+item.Day+'</h1></div>');
$('div#'+dateId).append('<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>');
}
});
NOTE: I'm adding the date div's to the body, just change $('body') to the container where you want to put them in your page.

I would suggest you to create the whole html and then set it as html.
var data = [{
"FirstName": "Anushka",
"Country": "UK",
"Day": "13/10/2017"
},
{
"FirstName": "Alessandra",
"Country": "IT",
"Day": "16/10/2017"
},
{
"FirstName": "Clare",
"Country": "US",
"Day": "13/10/2017"
}
];
$(function() {
// You can have this inside $.getJSON
var _html = "";
data.forEach(function(item) {
_html += '<div id="' + item.Day.replace(/\//g, "") + '">' +
'<h1>' + item.Day + '</h1>' +
'<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>' +
'</div>';
});
$("#container").html(_html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

but I cannot figure out how to use an if statement to only output if
date = 13/10/2017
Simply check if item.Day == "13102017"
$( document ).ready(function() {
$.getJSON("URL_HERE", function(data) {
$.each(data, function(i, item) {
if ( item.Day == "13102017" )
{
var id = item.Day.replace( /\D/g, "" );
var html = '<div id="' id '">';
html += '<h1>' + item.Day + '</h1>';
html += '<div class="col-sm-4"><p>' + item.FirstName + '</p></div>';
html += '<div class="col-sm-4"><p>' + item.Country + '</p></div>';
html += '</div>';
$(body).append( html );
}
});
});
});

Trying to get this string to appear in a paragraph

Trying to get this string I have in JavaScript to appear in a paragraph in my HTML page by mousing over another paragraph.
function showInfo()
{
for (i = 0; i < object2; i = i + 1)
{
var myParagraph = "Name of Business: " + info.insurance[i].name + "\nState: " + info.insurance[i].state + "\nDiscount: " + info.insurance[i].discount + "\n" + "(" + i + 1 + "of" + object2 + ")"
}
}
myDiscount.addEventListener("mouseover", showInfo, false);
myDiscount.addEventListener("mouseout", showInfo, false);
<p id="discount">Show me the discounts!</p>
<p id="myP"></p>

If you want to show the next element of the info.insurance array each time you mouse over the paragraph, you shouldn't be using a for loop. That will do it all at once, not once for each mouseover. You need to put the counter in a global variable, and just increment it each time you call the function.
Yuo show it by assigning it to the innerHTML of the paragraph. You also need to use <br> rather than \n to make newlines (unless the style of the paragraph is pre).
var insurance_counter = 0;
function showInfo() {
var myParagraph = "Name of Business: " + info.insurance[insurance_counter].name + "<br>State: " + info.insurance[insurance_counter].state + "<br>Discount: " + info.insurance[insurance_counter].discount + "<br>(" + (insurance_counter + 1) + "of" + object2 + ")";
document.getElementById("myP").innerHTML = myParagraph;
insurance_counter++;
if (insurance_counter >= object2) { // wrap around when limit reached
insurance_counter = 0;
}
}

fetch data from a dynamic page/table?

The dynamic page is created to display the data fetched from the database, the dynamic page also creates a table for the data to be presented in.
I then have a button (btnJoin) which is under every set of results, the button triggers a function that updates the table.
In order to update the table I need to fetch the specific event that the user joins, therefore is it possible to fetch the data from title (response.rows.item(i).Title) of the specific event the button was pressed on?
My SQL query for the update function should look something like:
tx.executeSql("Update soccerevents SET NoPeople = NoPeople +1 WHERE Title = '" + response.rows.item(i).Title + "'", [], successJoin,errorCB);
JavaScript (Dynamic Page/Table):
function fetchEvent() {
db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024);
db.transaction(function(tx) {
var TitleT = document.getElementById("texttitle").value;
tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], successCBValue, errorCB);
});
function successCBValue(tx, response, page_id) {
var formElements = "<table id='resulttable' data-role='table' data-mode='reflow' class='ui-responsive table-stroke table-stripe'><thead><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr></thead><tbody>";
for (var i = 0; i < response.rows.length; i++) {
formElements += "<tr><td>"
+ response.rows.item(i).Title + "</td><td>"
+ response.rows.item(i).Location +"</td><td>"
+ response.rows.item(i).NoPeople + "</td><td>"
+ response.rows.item(i).Date +"</td><td>"
+ response.rows.item(i).Description + "<button data-rowtitle='" + response.rows[i].Title + "' data-mini='true' class='btnJoin'>Join</a></td></tr>";
}
formElements+="</tbody></table>";
alert("For better viewing of events, tilt phone landscape.");
$('#page_body').append('<div data-role="page" data-theme="d" id="' + page_id + '"><div data-role="content">' + formElements + 'Return</div></div>');
$.mobile.initializePage();
$.mobile.changePage("#" + page_id);
$(document).on("click", ".btnJoin", function(e){
var title = $(this).data("rowtitle");
alert(title);
});
}
}
function updateEvent() {
var title = document.getElementById("rowtitle");
db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024);
db.transaction(function(tx) {
tx.executeSql("Update soccerevents SET NoPeople = NoPeople +1 WHERE Title = '" + title + "'", [], successJoin,errorCB);
});
function successJoin() {
navigator.notification.alert("You have joined the event!", null, "Information", "ok");
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#page4" );
}
}

You could add the title as a data attribute of the button
for (var i = 0; i < response.rows.length; i++) {
formElements += "<tr><td>" + response.rows[i].Title + "</td><td>" +
response.rows[i].Location +"</td><td>" +
response.rows[i].NoPeople + "</td><td>" +
response.rows[i].Date +"</td><td>" +
response.rows[i].Description +
"<button data-rowtitle='" + response.rows[i].Title + "' class='btnJoin' >Click me</button></td></tr>";
}
Then in the button click handler, retrieve the attribute using the jQuery data() method:
$(document).on("click", ".btnJoin", function(e){
var title = $(this).data("rowtitle");
alert(title);
});
DEMO

Checking for a value in an Array inside of a JSON file

I have a JSON file for which I have created a jQuery function to find matching values and and display them in a div. I'm not quite sure how to compare a single value within the activitiesarray in the JSON file. It only seems to return the entire array.
How do I check through each resortin the JSON file and see if one of the values in the activities array inside the JSON file contains a specific value like scuba diving
JavaScript:
var destination = $('option:selected', "#destination").attr('value');
var comfortLevel = $('option:selected', "#comfortLevel").attr('value');
var activities = $('option:selected', "#activities").attr('value');
var date = $('option:selected', "#date").attr('value');
var price = $('option:selected', "#price").attr('value');
$.getJSON('resort.json', function(data) {
$.each(data.resorts, function(key, val) {
if (destination == val.destination) {
if (comfortLevel == val.comfortLevel || activties == val.activities || date == val.startDate || price > val.price) {
$("#resortData").html("<img src= "+val.picture+" class='miniPic'> Destination: "+ val.destination + "<br>" + "Name: " + val.name + "<br>" +"Location: "
+ val.location + "<br>" + "Comfort: " + val.comfortLevel + " Star <br>" + "Activities: " + val.activities + "<br>" + "Price: £"
+ val.price + "<br>" + "Start Date: " + val.startDate + "<br>" + "End Date: " + val.endDate + "<br>" + "Description: " + val.short_description
+ "<br><br>" + "<a href=':" + val.url +"'>Click HERE for more info</a>");
}
}
});
});
resort.JSON:
{
"resorts": [
{
"id":"resort1",
"destination":"Carribean",
"name":"Les Boucaniers",
"location":"Martinique",
"comfortLevel": "4",
"activities":["water skiing", "tennis", "scuba diving", "kitesurf", "spa"],
"price":1254,
"startDate":"2016-01-01",
"endDate":"2016-12-31",
"short_description":"The resort of Les Boucaniers is located on the laid-back beach-covered south coast of the island, and is perfectly placed for Martinique holidays that are both relaxing and awe-inspiring.",
"picture":"images/resort1pic1small.jpg",
"long_description":"A divers' paradise in the Baie du Marin, a legendary spot.<br>Its bungalows are discreetly lodged in a tropical garden beside the white sand beach in superb Marin Bay. A magical site where you can enjoy a taste of everything, alone or with family or friends. Try water sports and the magnificent Club Med Spa*. You'll be enchanted by the exotic flavours of the local cuisine and the joyful spirit of the Caribbean.",
"url":"resorts/resort1.html"
},
{
"id":"resort2",
"destination":"Indian Ocean",
"name":"La Plantation d'Albion",
"location":"Mauritius",
"comfortLevel": "5",
"activities":["kids club","golf", "scuba diving", "flying trapeze", "tennis", "sailing", "spa"],
"price":2062,
"startDate":"2016-01-01",
"endDate":"2016-12-31",
"short_description":"Beautifully located in one of the last remote creeks on the island, La Plantation d'Albion Club Med welcomes the most demanding of guests into a world of supreme refinement.",
"picture":"images/resort2pic1small.jpg",
"long_description":"In a remote beauty spot, savour the luxury of Mauritian lifestyle. <br> The idyllic natural setting is enhanced by the sublime decor designed by Marc Hertrich and Nicolas Adnet, and the Resort's top-end comfort is perfectly reflected in its beautifully spacious rooms. The exceptional CINQ MONDES Spa* and luxurious overflow pool add an ideally Zen touch.<br> The Resort is entirely devoted to fulfilling its guests' desires and offers discreet, personal service in its swimming areas, bars and 'Table Gourmet' restaurants.",
"url":"resorts/resort2.html"
}
]}

How do I check through each resortin the JSON file and see if one of
the values in the activities array inside the JSON file contains a
specific value like scuba diving
Use indexOf() on the activities array.
NB there's a typo (activties ) here: if (comfortLevel == val.comfortLevel || activties == val.activities ...

A little tricky, but sometimes a RegExp helps in this type of situations and saves a lot of code:
var escape = /[.?*+^$[\]\\(){}|-]/g;
var destination = $('option:selected', "#destination").attr('value').replace(escape, "//$&");
var comfortLevel = $('option:selected', "#comfortLevel").attr('value');
var activities = $('option:selected', "#activities").attr('value').replace(escape, "//$&");
var date = $('option:selected', "#date").attr('value').replace(escape, "//$&");
var price = $('option:selected', "#price").attr('value');
$.get('resort.json', function(data) {
var json = JSON.parse( data.match(new RegExp('(\{[^\{\}]*?"destination"\s*\:\s*"' + destination + '"[^\}]*(?:"comfortLevel"\s*\:\s*"' + comfortLevel + '"|"activities"\s*\:\s*\[[^\]]*"' + activities + '"[^\]]*\]|"date"\s*\:\s*"' + date + '"|"price"\s*\:\s*(?:' + "[0-" + price.split("").join("]?[0-") + "]?" + '))[^\{\}]*?\})'))[0] );
$("#resortData").html("<img src= "+json.picture+" class='miniPic'> Destination: "+ json.destination + "<br>" + "Name: " + json.name + "<br>" +"Location: "
+ json.location + "<br>" + "Comfort: " + json.comfortLevel + " Star <br>" + "Activities: " + json.activities + "<br>" + "Price: £"
+ json.price + "<br>" + "Start Date: " + json.startDate + "<br>" + "End Date: " + json.endDate + "<br>" + "Description: " + json.short_description
+ "<br><br>" + "<a href=':" + json.url +"'>Click HERE for more info</a>");
});
The specific piece of RegExp to test if an activities is contained in the Array is this:
'"activities"\s*\:\s*\[[^\]]*"' + activities + '"[^\]]*\]'

Trouble passing JSON data into embedded map

I'm trying to build a page that will display several points on a map, each representing a scheduled event with a Title, location, date, link, and description. For the map itself, I'm using the maplace plugin (http://maplacejs.com), and the events are being stored in a .json file. Currently, I get no errors in the log, and the map appears on page load, but the points don't appear. Here's the relevant code:
data.json
{ "allEvents": [
{
"eventName" : "Event #1",
"eventDate" : "May 27, 2014",
"lat": "52.963619",
"long": "-125.619140",
"link": "http://www.google.com"
"description" : "short description"},
]}
in my header script
var eventLocations = [];
$.getJSON('data.json', function(events) {
for (var i in data.allEvents) {
var name = data.allEvents[i].eventName;
var date = data.allEvents[i].eventDate;
var latitude = data.allEvents[i].lat;
var longitude = data.allEvents[i].long;
var link = data.allEvents[i].link;
var desc = data.allEvents[i].description;
var loc = "{ lat: " + latitude + "," +
"lon: " + longitude + "," +
"icon: images/icon3.png," +
"title: " + name + "," +
"html: <div class='infoWindow'>" +
"<h3>" + name + "</h3>" +
"<h4>" + date + "</h4>" +
"<a href='http://" + link + "' target='_blank'>view website</a>" +
"<p>" + desc + "</p>" +
"</div> },";
eventLocations.push(loc);
};
});
and
$(function() {
var maplace = new Maplace({
//I have lots of other parameters here (controls, stylers, options, etc)
locations: [ eventLocations ]
});
maplace.Load();
It's also worth mentioning that if I write out one location in the Maplace (i.e. in place of the 'eventLocations' variable, the pin shows up fine.
Thanks in advance!