Related
I am playing with W3School's autocomplete and I set it to alert when an item from the dropdown autocomplete menu is clicked, but now I want to have the same functionality for when a user hits enter, but only if the user input matches a country exactly (case insensitive). They should not be able to trigger the alert with enter if they partially typed a country name.
I have tried setting multiple event listeners, as well as using one to call two different functions, but I am not understanding the logic behind what I'm trying to complete.
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) {
return false;
}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if ((arr[i].toUpperCase()).includes(val.toUpperCase())) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
b.innerHTML += arr[i];
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
if (arr[i].toUpperCase() == val.toUpperCase()) {
closeAllLists();
}
// if (e.keyCode == 13 && acList === null && document.getElementById("inputField").value.length != 0)
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
alert('clicked');
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function(e) {
closeAllLists(e.target);
});
}
var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua & Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil", "British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central Arfrican Republic", "Chad", "Chile", "China", "Colombia", "Congo", "Cook Islands", "Costa Rica", "Cote D Ivoire", "Croatia", "Cuba", "Curacao", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland", "France", "French Polynesia", "French West Indies", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Isle of Man", "Israel", "Italy", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kosovo", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauro", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Korea", "Norway", "Oman", "Pakistan", "Palau", "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russia", "Rwanda", "Saint Pierre & Miquelon", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Korea", "South Sudan", "Spain", "Sri Lanka", "St Kitts & Nevis", "St Lucia", "St Vincent", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor L'Este", "Togo", "Tonga", "Trinidad & Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks & Caicos", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States of America", "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Virgin Islands (US)", "Yemen", "Zambia", "Zimbabwe"];
/*initiate the autocomplete function on the "inputField" element, and pass along the countries array as possible autocomplete values:*/
autocomplete(document.getElementById("inputField"), countries);
window.onload = function() {
document.getElementById("inputField").focus();
};
.autocomplete-items {
background-color: black;
color: white;
width: 27%;
}
<form id="form" autocomplete="off" action="/action_page.php">
<div class="form-group autocomplete d-inline-flex align-items-center mt-3">
<label for="form-control" class="seasonsLabel me-3"></label>
<input type="text" class="form-control" id="inputField" required>
</div>
</form>
Trivial to add
I must comment that the code is another example of why I never recommend w3schools. It is suboptimal. In any case here is what you need added without changing the other code
const capitalize = s => s && s[0].toUpperCase() + s.slice(1)
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (countries.includes(capitalize(this.value))) alert("Found")
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
const capitalize = s => s && s[0].toUpperCase() + s.slice(1)
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) {
return false;
}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if ((arr[i].toUpperCase()).includes(val.toUpperCase())) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
b.innerHTML += arr[i];
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
if (arr[i].toUpperCase() == val.toUpperCase()) {
closeAllLists();
}
// if (e.keyCode == 13 && acList === null && document.getElementById("inputField").value.length != 0)
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
alert('clicked');
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (countries.includes(capitalize(this.value))) alert("Found")
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function(e) {
closeAllLists(e.target);
});
}
var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua & Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil", "British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central Arfrican Republic", "Chad", "Chile", "China", "Colombia", "Congo", "Cook Islands", "Costa Rica", "Cote D Ivoire", "Croatia", "Cuba", "Curacao", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland", "France", "French Polynesia", "French West Indies", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Isle of Man", "Israel", "Italy", "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kosovo", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauro", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Korea", "Norway", "Oman", "Pakistan", "Palau", "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russia", "Rwanda", "Saint Pierre & Miquelon", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Korea", "South Sudan", "Spain", "Sri Lanka", "St Kitts & Nevis", "St Lucia", "St Vincent", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor L'Este", "Togo", "Tonga", "Trinidad & Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks & Caicos", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States of America", "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Virgin Islands (US)", "Yemen", "Zambia", "Zimbabwe"];
/*initiate the autocomplete function on the "inputField" element, and pass along the countries array as possible autocomplete values:*/
autocomplete(document.getElementById("inputField"), countries);
window.onload = function() {
document.getElementById("inputField").focus();
};
.autocomplete-items {
background-color: black;
color: white;
width: 27%;
}
<form id="form" autocomplete="off" action="/action_page.php">
<div class="form-group autocomplete d-inline-flex align-items-center mt-3">
<label for="form-control" class="seasonsLabel me-3"></label>
<input type="text" class="form-control" id="inputField" name="inputField" required><input type="submit" />
</div>
</form>
use keypress for enter button.
use click for mouse click.
var input = document.getElementById("myInput");
input.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
<h3>Trigger Button Click on Enter</h3>
<p>Press the "Enter" key inside the input field to trigger the button.</p>
<input id="myInput" value="Some text..">
<button id="myBtn" onclick="javascript:alert('Hello World!')">Button</button>
The below data are the two given array of objects.
The first variable vacStatus contains the information regarding the vaccination status for the state, date and number of people getting vaccinated.
The second variable census2020 contains the information regarding the state and total people.
let vacStatus = [
{"st": "Connecticut", "date": "12/05/2021", "vac": 3031233},
{"st": "Connecticut", "date": "12/06/2021", "vac": 3031723},
{"st": "New Jersey", "date": "01/08/2022", "vac": 7554407},
{"st": "New Jersey", "date": "01/09/2022", "vac": 7560007},
{"st": "New Jersey", "date": "01/10/2022", "vac": 7562207},
{"st": "New Jersey", "date": "01/11/2022", "vac": 7564407},
{"st": "New York", "date": "01/09/2022", "vac": 16625152},
{"st": "New York", "date": "01/10/2022", "vac": 16626152},
{"st": "Pennsylvania", "date": "01/10/2022", "vac": 10208537},
{"st": "Pennsylvania", "date": "01/11/2022", "vac": 10218537},
{"st": "Rhode Island", "date": "01/11/2022", "vac": 961320},
{"st": "Vermont", "date": "01/11/2022", "vac": 564218},
];
let census2020 = [
{"st": "Connecticut", "ppl": 3605944},
{"st": "Maine", "ppl": 1362359},
{"st": "Massachusetts", "ppl": 7029917},
{"st": "New Hampshire", "ppl": 1377529},
{"st": "Rhode Island", "ppl": 1097379},
{"st": "Vermont", "ppl": 643077},
];
Below is the result I would like to get from munipulating the two given Array of Objects above.
Note that the r is the rate of people getting vaccinated based on the total number of people in that state (data from the census2020), and the most recent vaccine status data (data from vacStatus where the "date" is the closest date to today)
// Your result should look like:
let vacRate = [
{"st": "Connecticut", "r": 0.8407570943974726},
{"st": "New Jersey", "r": null},
{"st": "New York", "r": null},
{"st": "Pennsylvania", "r": null},
{"st": "Rhode Island", "r": 0.8760145765501254},
{"st": "Vermont", "r": 0.8773723830894279},
];
Below is my solution, but it is NOT correct!!!!
let vacRate = [];
for (i = 0; i < vacStatus.length; i++ ){
let state = vacStatus[i]["st"]
let vacPpl = vacStatus[i]["vac"]
let tempData = {"st": state, "r": null};
for (let each of census2020) {
if(each["st"] == state){
let pplInfo = each.ppl;
tempData = {"st": state, "r": vacPpl / pplInfo};
vacRate.push(tempData)
}
}
vacRate.push(tempData)
}
console.log(vacRate)
console.log(vacRate.length)
Could you please help me with how to get the data right in vacRate? I admit that I am very bad at array of objects, but it is such a useful and frequent data structure to use.
I appreciate your help!!!
I don't know too much details of what you're trying to do but I could get the values like this:
const rate = vacStatus.map((status) => {
const currentCensus = census2020.find((census) => census.st === status.st);
const vacRate = status.vac / currentCensus?.ppl || null;
return {
st: status.st,
r: vacRate,
};
});
Do you need to sum up the "vac"s of same state and different dates before calculating the rate? if so, the approach needs to be different:
const sanitizedVacStatus = Array.from(
vacStatus.reduce((m, { st, vac }) => m.set(st, (m.get(st) || 0) + vac), new Map()),
([st, vac]) => ({ st, vac })
);
First you need to sum up all the equal cities by the vac value and return only one item each (in this case, without the date).
And then you can use sanitizedVacStatus as the value for the first map instead of vacStatus.
I am creating hangman and with this code I replace the content in string with dashes, but some strings are two words -- "hello world" -- which the output is - - - - - - - - - - - 11 characters instead of ten. How do I avoid replacing the space?
var stateNames = ["alabama", "alaska", "arizona", "california",
"colorado", "connecticut", "delaware", "florida", "georgia",
"hawaii",
"idaho", "illinois", "indiana", "iowa", "kansas", "kentucky",
"louisiana", "maine", "maryland", "massachusetts", "michigan",
"minnesota", "mississippi", "missouri", "montana", "nebraska",
"nevada", "new hampshire", "new jersey", "new mexico", "new york",
"north carolina", "north dakota", "ohio", "oklahoma", "oregon",
"pennsylvania", "rhode island", "south carolina", "south dakota",
"tennessee", "texas", "utah", "vermont", "virgina", "washington",
"west virgina", "wisconsin", "wyoming"];
function beginGame() {
var randomPick = stateNames[Math.floor(Math.random() *
stateNames.length)];
var replaceWithDash = [];
for (i = 0; i < randomPick.length; i++){
replaceWithDash[i] = "_";
}
console.log(randomPick);
console.log(replaceWithDash);
}
beginGame();
While you're looping over your letters, you'll want to check whether or not the target letter is a space or not. If it's not a space, replace it with a dash. If it is a space, however, you should replace it with a space instead.
Note that considering you're making use of the second array replaceWithDash rather than simply replacing the letters, you'll need to explicitly state that the letter in the new array should contain a space, rather than simply only running the logic when there is not a space. As such, the else is required in the following (or else you'd end up with undefined indexes):
for (i = 0; i < randomPick.length; i++) {
if (randomPick[i] !== " ") {
replaceWithDash[i] = "_";
}
else {
replaceWithDash[i] = " ";
}
}
This can be seen in the following:
var stateNames = ["alabama", "alaska", "arizona", "california",
"colorado", "connecticut", "delaware", "florida", "georgia",
"hawaii",
"idaho", "illinois", "indiana", "iowa", "kansas", "kentucky",
"louisiana", "maine", "maryland", "massachusetts", "michigan",
"minnesota", "mississippi", "missouri", "montana", "nebraska",
"nevada", "new hampshire", "new jersey", "new mexico", "new york",
"north carolina", "north dakota", "ohio", "oklahoma", "oregon",
"pennsylvania", "rhode island", "south carolina", "south dakota",
"tennessee", "texas", "utah", "vermont", "virgina", "washington",
"west virgina", "wisconsin", "wyoming"
];
function beginGame() {
var randomPick = stateNames[Math.floor(Math.random() *
stateNames.length)];
var replaceWithDash = [];
for (i = 0; i < randomPick.length; i++) {
if (randomPick[i] !== " ") {
replaceWithDash[i] = "_";
}
else {
replaceWithDash[i] = " ";
}
}
console.log(randomPick);
console.log(replaceWithDash);
}
beginGame();
Hope this helps! :)
To answer your question, basically you need to check if the value you are inserting into the array is a space or not. If you want to do something different when it is a space, you can add an else statement to do so. Here you will just iterate over that element of the array and then use filter_array to clean it up.
var stateNames = ["alabama", "alaska", "arizona", "california",
"colorado", "connecticut", "delaware", "florida", "georgia",
"hawaii",
"idaho", "illinois", "indiana", "iowa", "kansas", "kentucky",
"louisiana", "maine", "maryland", "massachusetts", "michigan",
"minnesota", "mississippi", "missouri", "montana", "nebraska",
"nevada", "new hampshire", "new jersey", "new mexico", "new york",
"north carolina", "north dakota", "ohio", "oklahoma", "oregon",
"pennsylvania", "rhode island", "south carolina", "south dakota",
"tennessee", "texas", "utah", "vermont", "virgina", "washington",
"west virgina", "wisconsin", "wyoming"];
function beginGame() {
var randomPick = stateNames[Math.floor(Math.random() *
stateNames.length)];
var replaceWithDash = [];
for (i = 0; i < randomPick.length; i++){
if(randomPick.charAt(i-1) != " "){
replaceWithDash[i] = "_";
}
}
console.log(randomPick);
console.log(filter_array(replaceWithDash));
}
beginGame();
function filter_array(test_array) {
var index = -1,
arr_length = test_array ? test_array.length : 0,
resIndex = -1,
result = [];
while (++index < arr_length) {
var value = test_array[index];
if (value) {
result[++resIndex] = value;
}
}
return result;
}
I am utilizing jquery to loop thru 'searchResults' and looping thru 'SearchResult' and then looping again into 'SearchResultItems' to begin appending values. I then locate 'LocationDetails' and loop thru the nested values of State to display states for each 'DisplayTitle'.
If that description isn't well written, here is the code.
searchResults = [{
"SearchResult": {
"SearchResultItems": [{
"MatchedObjectDescriptor": {
"URI":"http://...",
"DisplayTitle": "Boss Person",
"LocationDetails": [{
"State": "California",
"CityName": "San Francisco County, California",
},{
"State": "Colorado",
"LocationName": "Denver, Colorado",
},{
"State": "California",
"CityName": "Los Angeles, California",
}]
}
},{
"MatchedObjectDescriptor": {
"URI":"http://...",
"DisplayTitle": "Assistant",
"LocationDetails": [{
"State": "Colorado",
"CityName": "Denver, Colorado",
},{
"State": "Colorado",
"LocationName": "Denver, Colorado",
},{
"State": "California",
"CityName": "Sacramento, California",
}]
}
},
]
}
}];
My current attempt at navigating the array of objects.
$.each(searchResults, function(key,value){
$.each(value.SearchResult.SearchResultItems,function(key,value){
var items = value.MatchedObjectDescriptor,
title = items.DisplayTitle;
$.each(items.LocationDetails, function(key,value){
var states = value.State;
$(".content").append("<ul><li>'" + title + "'<ul><li>'" + states + "'</li></ul></li></ul>");
});
});
});
See my work here so far with the wrong output: https://jsfiddle.net/arkjoseph/esvgcos7/15/
I am looking for this output filtering duplicate states and not having a different title for each state that is available in the object.
Boss person
California
Colorado
Assistant
Colorado
California
This gives you expected output.
searchResults = [{
"SearchResult": {
"SearchResultItems": [{
"MatchedObjectDescriptor": {
"URI": "http://...",
"DisplayTitle": "Boss Person",
"LocationDetails": [{
"State": "California",
"CityName": "San Francisco County, California",
}, {
"State": "Colorado",
"LocationName": "Denver, Colorado",
}, {
"State": "California",
"CityName": "Los Angeles, California",
}]
}
}, {
"MatchedObjectDescriptor": {
"URI": "http://...",
"DisplayTitle": "Assistant",
"LocationDetails": [{
"State": "Colorado",
"CityName": "Denver, Colorado",
}, {
"State": "Colorado",
"LocationName": "Denver, Colorado",
}, {
"State": "California",
"CityName": "Sacramento, California",
}]
}
}, ]
}
}];
var states = "";
$.each(searchResults, function(key, value) {
$.each(value.SearchResult.SearchResultItems, function(key, value) {
var items = value.MatchedObjectDescriptor,
title = items.DisplayTitle;
var s = [];
var li = "";
$.each(items.LocationDetails, function(key, value) {
var states = value.State;
if (!s.includes(states)) {
s.push(states);
li += ("<li>" + states + "</li>")
}
});
$(".content").append("<ul><li>" + title + "<ul>" + li + "</ul></li></ul>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="content"></div>
actual json endpoint: <a target="_blank" href="https://pastebin.com/embed_js/dRfMedYb">Here</a>
A working version of your code is as follows. This is just one example of how to do it, but using Set in ES6 (if you have an environment where it's permitted or are using a transpiler like Babel) might be desirable. Either way, this just appends to an array and joins on an empty string at the end to create your nodes. Using jQuery to build your elements also will likely be more scalable down the road, but for a small app the following works.
searchResults = [{
"SearchResult": {
"SearchResultItems": [{
"MatchedObjectDescriptor": {
"URI":"http://...",
"DisplayTitle": "Boss Person",
"LocationDetails": [{
"State": "California",
"CityName": "San Francisco County, California",
},{
"State": "Colorado",
"LocationName": "Denver, Colorado",
},{
"State": "California",
"CityName": "Los Angeles, California",
}]
}
},{
"MatchedObjectDescriptor": {
"URI":"http://...",
"DisplayTitle": "Assistant",
"LocationDetails": [{
"State": "Colorado",
"CityName": "Denver, Colorado",
},{
"State": "Colorado",
"LocationName": "Denver, Colorado",
},{
"State": "California",
"CityName": "Sacramento, California",
}]
}
},
]
}
}];
var states = [];
var output = [];
$.each(searchResults, function(key,value){
output.push("<ul>")
$.each(value.SearchResult.SearchResultItems,function(key,value){
var items = value.MatchedObjectDescriptor,
title = items.DisplayTitle;
output.push("<li>" + title + "</li>")
output.push("<ul>")
$.each(items.LocationDetails, function(key,value){
if (states.filter(s => s == value.State).length) return;
states.push(value.State)
output.push("<li>" + value.State + "</li>")
});
states = []
output.push("</ul>")
});
output.push('</ul>')
});
$(".content").append(output.join(''));
I have the following JSON object that I need to un-nest, regroup and re-nest by the state. I understand that there must be some kind of for-loop and group by operation that needs to be performed.
[
{
"Date": "2000-01-01T08:00:00.000Z",
"Florida": "4626",
"New York": "210",
"Pennsylvania": "1500",
"Virginia": "9",
"West Virginia": "1400",
"Illinois": "12206",
"Indiana": "2098",
"Kansas": "34463",
"Kentucky": "3465",
"Michigan": "7907",
"Missouri": "94",
"Nebraska": "2957",
"North Dakota": "32719",
"Ohio": "6575",
"Oklahoma": "69976",
"South Dakota": "1170",
"Tennessee": "346",
"Alabama": "10457",
"Arkansas": "7154",
"Louisiana": "105425",
"Mississippi": "19844",
"New Mexico": "67198",
"Texas": "443397",
"Colorado": "18481",
"Montana": "15428",
"Utah": "15636",
"Wyoming": "60726",
"Alaska": "355199",
"Alaska South": "10590",
"Arizona": "59",
"California": "271132",
"Nevada": "621",
"": ""
},
{
"Date": "2001-01-01T08:00:00.000Z",
"Florida": "4426",
"New York": "166",
"Pennsylvania": "1620",
"Virginia": "11",
"West Virginia": "1226",
"Illinois": "10092",
"Indiana": "2022",
"Kansas": "33942",
"Kentucky": "2969",
"Michigan": "7375",
"Missouri": "91",
"Nebraska": "2922",
"North Dakota": "31691",
"Ohio": "6051",
"Oklahoma": "68531",
"South Dakota": "1255",
"Tennessee": "351",
"Alabama": "9334",
"Arkansas": "7592",
"Louisiana": "104610",
"Mississippi": "19528",
"New Mexico": "68001",
"Texas": "424297",
"Colorado": "16520",
"Montana": "15920",
"Utah": "15252",
"Wyoming": "57433",
"Alaska": "351411",
"Alaska South": "11500",
"Arizona": "59",
"California": "260663",
"Nevada": "572",
"": ""
},
{
"Date": "2002-01-01T08:00:00.000Z",
"Florida": "3634",
"New York": "164",
"Pennsylvania": "2324",
"Virginia": "25",
"West Virginia": "1456",
"Illinois": "11100",
"Indiana": "1962",
"Kansas": "33380",
"Kentucky": "2721",
"Michigan": "7218",
"Missouri": "95",
"Nebraska": "2782",
"North Dakota": "30803",
"Ohio": "5631",
"Oklahoma": "66421",
"South Dakota": "1214",
"Tennessee": "275",
"Alabama": "8636",
"Arkansas": "7252",
"Louisiana": "93321",
"Mississippi": "19371",
"New Mexico": "67562",
"Texas": "405776",
"Colorado": "20522",
"Montana": "16990",
"Utah": "13771",
"Wyoming": "54801",
"Alaska": "359382",
"Alaska South": "11303",
"Arizona": "63",
"California": "257898",
"Nevada": "553",
"": ""
}
]
I would like to process the above into the following format where state key is state name and production key is an array of dictionaries with years and production for that year.
[
{
"state": "California",
"production": [
{
"Date": "2000-01-01T08:00:00.000Z",
"production": 1000
},
{
"Date": "2001-01-01T08:00:00.000Z",
"production": 2000
}
]
},
{
"state": "New York",
"production": [
{
"Date": "2000-01-01T08:00:00.000Z",
"production": 4000
},
{
"Date": "2001-01-01T08:00:00.000Z",
"production": 5000
}
]
}
]
Please let me know what operations are needed to perform to achive the above format. Thank you!
Maybe this is working for you, with some iteration and an object as reference.
var data = [{ "Date": "2000-01-01T08:00:00.000Z", "Florida": "4626", "New York": "210", "Pennsylvania": "1500", "Virginia": "9", "West Virginia": "1400", "Illinois": "12206", "Indiana": "2098", "Kansas": "34463", "Kentucky": "3465", "Michigan": "7907", "Missouri": "94", "Nebraska": "2957", "North Dakota": "32719", "Ohio": "6575", "Oklahoma": "69976", "South Dakota": "1170", "Tennessee": "346", "Alabama": "10457", "Arkansas": "7154", "Louisiana": "105425", "Mississippi": "19844", "New Mexico": "67198", "Texas": "443397", "Colorado": "18481", "Montana": "15428", "Utah": "15636", "Wyoming": "60726", "Alaska": "355199", "Alaska South": "10590", "Arizona": "59", "California": "271132", "Nevada": "621", "": "" }, { "Date": "2001-01-01T08:00:00.000Z", "Florida": "4426", "New York": "166", "Pennsylvania": "1620", "Virginia": "11", "West Virginia": "1226", "Illinois": "10092", "Indiana": "2022", "Kansas": "33942", "Kentucky": "2969", "Michigan": "7375", "Missouri": "91", "Nebraska": "2922", "North Dakota": "31691", "Ohio": "6051", "Oklahoma": "68531", "South Dakota": "1255", "Tennessee": "351", "Alabama": "9334", "Arkansas": "7592", "Louisiana": "104610", "Mississippi": "19528", "New Mexico": "68001", "Texas": "424297", "Colorado": "16520", "Montana": "15920", "Utah": "15252", "Wyoming": "57433", "Alaska": "351411", "Alaska South": "11500", "Arizona": "59", "California": "260663", "Nevada": "572", "": "" }, { "Date": "2002-01-01T08:00:00.000Z", "Florida": "3634", "New York": "164", "Pennsylvania": "2324", "Virginia": "25", "West Virginia": "1456", "Illinois": "11100", "Indiana": "1962", "Kansas": "33380", "Kentucky": "2721", "Michigan": "7218", "Missouri": "95", "Nebraska": "2782", "North Dakota": "30803", "Ohio": "5631", "Oklahoma": "66421", "South Dakota": "1214", "Tennessee": "275", "Alabama": "8636", "Arkansas": "7252", "Louisiana": "93321", "Mississippi": "19371", "New Mexico": "67562", "Texas": "405776", "Colorado": "20522", "Montana": "16990", "Utah": "13771", "Wyoming": "54801", "Alaska": "359382", "Alaska South": "11303", "Arizona": "63", "California": "257898", "Nevada": "553", "": "" }],
grouped = [];
data.forEach(function (a) {
Object.keys(a).forEach(function (k) {
if (k !== 'Date') {
if (!this[k]) {
this[k] = { state: k, production: [] };
grouped.push(this[k]);
}
this[k].production.push({ Date: a.Date, production: a[k] });
}
}, this);
}, Object.create(null));
document.write('<pre>' + JSON.stringify(grouped, 0, 4) + '</pre>');