I have a map of arrays of numbers in JavaScript. My goal is to get the key of the value that contains a certain number. I'm also open to a different data structure that might be more efficient.
let bookCategory = {
"fantasy": [10064, 10066, 10071],
"scifi": [10060, 10037, 10061],
"history": [10001, 10003, 10004, 10005],
"biography": [10032, 10006, 10002, 10028, 10009, 10030, 100031],
"educational": [10025]
};
Each number will only ever appear once, but each array can contain close to a hundred numbers and it may grow substantially from there. The arrays could be immutable as my data is static.
Right now I have this, but it doesn't seem terribly efficient.
let category;
let keys = _.keys(categories);
let theNumber = 10032;
for(let j = 0; j < keys.length; j++) {
if(_.includes(categories[keys[j]], theNumber)) {
category = keys[j];
break;
}
}
lodash library has a lot of useful functions. Using it, you have the following options:
1. Binary search
Create a new structure with sorted array of numbers. When looking for a number, apply a binary search.
_.sortedIndexOf() method uses binary search in an array.
var bookCategory = {
"fantasy": [10064, 10066, 10071],
"scifi": [10060, 10037, 10061],
"history": [10001, 10003, 10004, 10005],
"biography": [10032, 10006, 10002, 10028, 10009, 10030, 100031],
"educational": [10025]
};
var binaryMap = _.mapValues(bookCategory, function(category) {
return category.sort(function(num1, num2) {
return num1 - num2;
});
});
//then search using binary algorithm
var number = 10032;
var keyForNumber = _.findKey(binaryMap, function(numbers) {
return _.sortedIndexOf(numbers, number) !== -1;
});
keyForNumber // prints "biography"
Check the working demo.
2. Create a map object
Because the numbers will appear only once, it's easy to create a big hash object, where the key is the number and value is the category. It requires a bit more memory because copies the categories string, but it works quite fast.
This solution doesn't require lodash.
var bookCategory = {
"fantasy": [10064, 10066, 10071],
"scifi": [10060, 10037, 10061],
"history": [10001, 10003, 10004, 10005],
"biography": [10032, 10006, 10002, 10028, 10009, 10030, 100031],
"educational": [10025]
};
var map = _.reduce(bookCategory, function(result, numbers, key) {
_.each(numbers, function(number) {
result[number] = key;
});
return result;
}, {});
// or alternative without lodash
var mapAlternative = Object.keys(bookCategory).reduce(function(result, key) {
bookCategory[key].forEach(function(number) {
result[number] = key;
});
return result;
}, {});
var number = 10003;
map[number]; // prints "history"
Check the working demo.
There are too many what-ifs to answer that question, the biggest one being: How often is the data going to be updated vs read.
If it is going to be read much more often, then iterate through the bookCategory first and create a sparse array/object that links the numbers back to the category.
(I'll go for object here):
// Generate this programatticly, of course.
bookCategoryLinkback = {
10064: "fantasy",
10066: "fantasy",
10071: "fantasy"
};
sort the array and use binary search. You can use lodash lib to do it easily.
I suggest to use a hashtable for the numbers.
var bookCategory = {
"fantasy": [10064, 10066, 10071],
"scifi": [10060, 10037, 10061],
"history": [10001, 10003, 10004, 10005],
"biography": [10032, 10006, 10002, 10028, 10009, 10030, 100031],
"educational": [10025]
},
numbers = function (data) {
var r = Object.create(null);
Object.keys(data).forEach(k => data[k].forEach(a => r[a] = k));
return r;
}(bookCategory)
document.write('<pre>' + JSON.stringify(numbers, 0, 4) + '</pre>');
Related
I have this simple JSON file that supposed to be one array Paths with 3 arrays (Path1, Path2, Path3) of objects.
{
"Paths":
{
"Path1": [{"x":"4","y":"182"},{"x":"220","y":"186"}],
"Path2": [{"x":"4","y":"222"},{"x":"256","y":"217"}],
"Path3": [{"x":"6","y":"170"},{"x":"216","y":"183"}]
}
}
Considering an online example that I found I am doing this to get the length of Paths node:
// It's Phaser 3 (JS game framework)
// this.cache.json.get('data') -> returns me the JSON contents
var json = this.cache.json.get('data');
for (var pos in json.Paths) {
var len = parseInt(json.Paths[pos].length)+1;
console.log(len);
}
Although it works I would like to know if this is the correct approach because it seems to be too much code only to get a node length.
Thanks!
If you are wanting to get a count of all the points in all paths you could access them using Object.values() and then reduce()
const data ={
"Paths":
{
"Path1": [{"x":"4","y":"182"},{"x":"220","y":"186"}],
"Path2": [{"x":"4","y":"222"},{"x":"256","y":"217"}],
"Path3": [{"x":"6","y":"170"},{"x":"216","y":"183"}]
}
}
const numPoints = Object.values(data.Paths).reduce((a,c) => (a + c.length), 0)
console.log(numPoints)
Not sure if you are trying to print the length of each path or get total length of all paths, if you want to print the length of each path then you can use map
let lengths = Object.values(json.Paths).map(path => path.length + 1)
console.log(lengths)
which will output
[ 3, 3, 3 ]
or forEach like you did
Object.values(json.Paths).forEach(path => console.log(path.length + 1))
if you need the total you can use reduce
let nodeLength = Object.values(json.Paths).reduce((acc, path) => acc + path.length, 0)
which will give you 6
Edit: since in the comment you said you needed to know how many elements are in your object, you can use
Object.keys(json.Paths).length
to get that
I am trying to get a kind of "leaderboard" from a list of numbers. I was thinking of making an array with all the numbers like this
var array = [];
for (a = 0; a < Object.keys(wallets.data).length; a++) { //var wallets = a JSON (parsed) response code from an API.
if (wallets.data[a].balance.amount > 0) {
array.push(wallets.data[a].balance.amount)
}
}
//Add some magic code here that sorts the array into descending numbers
This is a great option, however I need some other values to come with the numbers (one string). That's why I figured JSON would be a better option than an array.
I just have no idea how I would implement this.
I would like to get a json like this:
[
[
"ETH":
{
"balance":315
}
],
[
"BTC":
{
"balance":654
}
],
[
"LTC":
{
"balance":20
}
]
]
And then afterwards being able to call them sorted descending by balance something like this:
var jsonarray[0].balance = Highest number (654)
var jsonarray[1].balance = Second highest number (315)
var jsonarray[2].balance = Third highest number (20)
If any of you could help me out or point me in the right direction I would appreciate it greatly.
PS: I need this to happen in RAW JS without any html or libraries.
You should sort the objects before making them a JSON. You can write your own function or use a lambda. See this [https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value]
Since you are dealing with cryptocurrency you can use the currency-code as a unique identifier.
Instead of an array, you can define an object with the currency as properties like this:
const coins = {
ETH: [300, 200, 500],
BTC: [20000, 15000, 17000]
}
then you can access each one and use Math.max or Math.min to grab the highest / lowest value of that hashmap. E.G. Math.max(coins.BTC)
And if you need to iterate over the coins you have Object.keys:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Thank you all for your answer. I ended up using something like:
leaderboard = []
for (a = 0; a < Object.keys(wallets.data).length; a++) {
if (wallets.data[a].balance.amount > 0) {
leaderboard.push({"currency":wallets.data[a].balance.currency, "price":accprice}) //accprice = variable which contains the value of the userhold coins of the current coin in EUR
}
}
console.log(leaderboard.sort(sort_by('price', true, parseInt)));
First-time poster here and have run into a speed bump in my pre-work for a 6-month full-stack boot camp I'm enrolled in for November.
I'm working on some exercises on repl.it and this one is on javascript functions. You're told to write 3 functions called mealMaker, slice, and cook.
You're given an empty array and are told to fill it with objects like so:
const arrayOfFoodObjects = [
{
"food": "beef",
"type": "meat"
},
{
"food": "zucchini",
"type": "vegetable"
},
{
"food": "bacon",
"type": "meat"
},
{
"food": "okra",
"type": "vegetable"
}
];
They want you to have the cook function take all the objects that have "type": "meat" and return a string that says "Cooked ("food": value)" (e.g. "Cooked beef") and similarly with the slice function for "type": "vegetable" they want "("food": value) slices" (e.g. "Okra slices").
Then the mealMaker function takes what those functions spit out and creates an array as such: ["Cooked beef", "Okra slices" ...].
Where I'm stuck is I wrote a .filter() function that just returns a filtered array of those objects which I soon realized wouldn't serve its purpose. I guess I'm trying to figure out how to write a function so I can filter the meat and vegetables separately and then have them spit out the required string.
What's confusing me is how to target the "food" value and plug it into a certain string after filtering with the "type" value.
This is the rest of the code I have written so far which may or may not help.
var redMeat = arrayOfFoodObjects.filter(function(cook) {
return cook.type == "meat";
});
var veggies = arrayOfFoodObjects.filter(function(slice) {
return slice.type == "vegetable";
});
console.log(veggies, redMeat)
With the console just looking like:
[ { food: 'zucchini', type: 'vegetable' },
{ food: 'okra', type: 'vegetable' } ] [ { food: 'beef', type: 'meat' },
{ food: 'bacon', type: 'meat' } ]
I'm probably not tackling this the right way as I've spent a good amount of time trying different things I had found on Google and applying them as best I could but this was the closest I managed to get. Any help is greatly appreciated, thanks.
PS I'm not super familiar with this format of a function as I came up with this through some searches on Google. If someone wouldn't mind explaining how this may differ from the function format I'm used to seeing, that'd be awesome. I'm not sure about which part of it is the "name" of the function. The functions I've worked with so far typically look like:
function nameOfFunction(value(s)) {
*action*;
}
You are not doing what they ask.
They want a cook function and a slice function:
function cook(arr){
//for each element of the array, return its mapped value (they ask a string)
return arr.map( function(foodObject){
return `Cooked ${foodObject.food}`
})
}
function slice(arr){
//do it
}
let cooks = cook(arrayOfFoodObjects)
let slices = slice(arrayOfFoodObjects)
then feed what the function spit out to mealMaker (as instructed):
function mealMaker(cooks, slices){
return cooks.map( function(cook, idxCook){
let slice = slices[idxCook];
//guess what to do with cook and slice
})
}
mealMaker(cooks, slices)
I think something alone these lines is requested:
const cook = product => "cooked " + product.food;
const slice = product => product.food + " slices";
const mealMaker = (products) => {
const meatProducts = products.filter(product => product.type === "meat");
const veggieProducts = products.filter(product => product.type === "vegetable");
return [
...cook(meatProducts),
...slice(veggieProducts)
];
}
mealMaker(arrayOfFoodObjects);
Notice the fat arrow syntax for writing functions. How it is different compared to regular functions, is explained here on Mozilla.
Welcome holdenprkr!
I think you are on the right track! For now, we have a way to get an array of veggies and another one for meats:
var redMeat = arrayOfFoodObjects.filter(function(cook) {
return cook.type == "meat";
});
var veggies = arrayOfFoodObjects.filter(function(slice) {
return slice.type == "vegetable";
});
So far so good, now we want a cook function that takes our readMeat array, and converts it to a array of strings. So, something in the lines of:
function cook(readMeatsArray) {
// convert readMeatsArray to cookedMeatsArray
// [{'food': 'beef', 'type': 'meat'}, ...]
// to
// ['Cooked beef', ...]
}
And then a slice function for the veggies:
function slice(veggiesArray) {
// convert veggiesArray to slicedVeggiesArray
// [{'food': 'okra', 'type': 'vegetable'}, ...]
// to
// ['Okra slices', ...]
}
So, if we combine this in an mealMaker function we now have:
function mealMaker() {
// First we get our arrays
var redMeat = arrayOfFoodObjects.filter(function(cook) {
return cook.type == "meat";
});
var veggies = arrayOfFoodObjects.filter(function(slice) {
return slice.type == "vegetable";
});
// Then we convert our object arrays to string arrays
var cookedMeats = cook(redMeat);
var slicedVeggies = slice(veggies);
// Now we combine the resulting arrays and return it
var mealArray = cookedMeats.concat(slicedVeggies);
return mealArray;
}
This would be one approach, hope it helps.
PD: I left the functions cook and slice empty on purpose, you can get some inspiration from user753642's answer ;)
So I have a Table made from some json data...
{
"AKH":{
"name": "Amonkhet",
"code": "AKH"
"cards": [
{
"artist": "Izzy",
"cmc": 3,
"colorIdentity": [
"W"
],
"colors": [
"White"
],
"id": "df3a6e0336684c901358f3ff53ec82ff5d7cdb9d",
"imageName": "gideon of the trials",
"layout": "normal",
"loyalty": 3,
"manaCost": "{1}{W}{W}",
"multiverseid": 426716,
"name": "Gideon of the Trials",
"number": "14",
"rarity": "Mythic Rare",
"subtypes": [
"Gideon"
],
"text": "+1: Until your next turn, prevent all damage target permanent would deal.\n0: Until end of turn, Gideon of the Trials becomes a 4/4 Human Soldier creature with indestructible that's still a planeswalker. Prevent all damage that would be dealt to him this turn.\n0: You get an emblem with \"As long as you control a Gideon planeswalker, you can't lose the game and your opponents can't win the game.\"",
"type": "Planeswalker — Gideon",
"types": [
"Planeswalker"
]
},
The Table row ends up looking like this for each of the cards. at the moment I only Attach the ID, Card name, and Mana Cost to each row
<td><a href="#" onclick="showInfo(this.id)"
id="df3a6e0336684c901358f3ff53ec82ff5d7cdb9d">Gideon of the Trials</a></td>
Now I want to search through these cards. (Keep in mind there are over 17,000 different cards that will be on this list) I can get it to find the things.. But I'm having several different issues... Either it finds them all but doesn't hide the rest of the list, or it hides the whole list and only displays one of the found cards.
So question A... What am I missing to make the search work correctly?
$(document).on('change', 'input[type=checkbox]', function() {
var lis = $('.cardsRow')
$('input[type=checkbox]').filter(':checked').each(function(){
filterKeyB = $(this).attr('id')
filterKeyA = $(this).attr('name')
$.each(json, function(setCode, setListing) {
$.each(setListing.cards,function(cardNum, cardListing){
var x = Object.keys(cardListing)
var y = Object.keys(cardListing).map(function (key){
return cardListing[key]
})
for (i = 0; (i < x.length); i++) {
if(x[i] === filterKeyA){
if (y[i] instanceof Array){
var holder = y[i]
var valueArr =[]
for(var k = 0; k < holder.length; k++){
valueArr = holder.join('|').toLowerCase().split('|')
var foundIt = valueArr.includes(filterKeyB)
}
}else{
var stringy = y[i]
var stringyA= stringy.toLowerCase().replace(/\s/g, '')
if (stringyA === filterKeyB){
var foundIt = true
}
}
if(foundIt === true){
$winner = cardListing.name
for (k = 0; (k < lis.length); k++){
if (lis[k].innerText.indexOf($winner) != -1) {
$(lis[k]).show()
}
}
}
}
}
})
Question B... Since you are already here... Would it be better practice to attach the data that can be searched to the element itself? Maybe just the most searched (Like Name and Mana) and have more advanced queries go through the data again?
I don't understand why the code isn't working or even how it works, it looks like it references some functions that aren't defined in the sample. But I can share with you a really simple/intuitive way to filter stuff, I hope you find it useful.
Native filter method is so useful for what you're trying to do, it takes a callback that takes current element as an arg and returns true or false, if true, the element is included in the new array it produces.
But filter only takes one function, and you have many filters, so let's make a function that combines many filter Fns together into one fn, so you can pass them in all at once:
const combineFilters = (...fns) => val => fns.reduce((prev, curr) => prev || curr(val), false);
OK, how about storing the names of the filter functions as keys in an object so we can reference them using a string? That way we could give each checkbox an ID corresponding to the name of the filter function they are supposed to apply, and makes things really easy to implement (and read):
const filterFns = {
startsWithG(card) {
return card.name[0] === 'G';
},
//etc.
};
OK, time to get the IDs of all the checkboxes that are clicked, then map them into an array of functions.
const filters = $('input[type=checkbox]')
.filter(':checked')
.map((e, i) => $(i).attr('id'))
.get()
.map(fnName => filterFns[fnName])
(Assume the relevant data is stored in a var called...data.) We can use combineFilters combined with filters (array of Fns) to activate all of the relevant filters, then map the resulting array of matching objects into the HTML of your choosing.
const matches = data.cards
.filter(combineFilters(...filters))
.map(card => `<div>${card.name}</div>` );
Then time to update DOM with your matches!
As others have noted, if you need to do any more complicated filtering on objects or arrays, lodash library is your friend!
I'm brand new to programming so I apologize if this is a simple question.
I had a unique practice problem that I'm not quite sure how to solve:
I'm dealing with two arrays, both arrays are pulled from HTML elements on the page, one array is representing a bunch of states, and the next array is representing their populations. The point of the problem is to print the name of the states and their less than average populations.
To find and print all of the populations that are less than the average I used this code:
function code6() {
// clears screen.
clr();
// both variables pull data from HTML elements with functions.
var pop = getData2();
var states = getData();
var sum = 0;
for( var i = 0; i < pop.length; i++ ){
sum += parseInt( pop[i], 10 );
var avg = sum/pop.length;
if (pop[i] < avg) {
println(pop[i]);
// other functions used in the code to get data, print, and clear the screen.
function getData() {
var dataSource = getElement("states");
var numberArray = dataSource.value.split('\n');
// Nothing to split returns ['']
if (numberArray[0].length > 0) {
return(numberArray);
} else {
return [];
}
}
// Get the data from second data column
function getData2() {
var dataSource = getElement("pops");
var numberArray = dataSource.value.split('\n');
// Nothing to split returns ['']
if (numberArray[0].length > 0) {
return(numberArray);
} else {
return [];
}
}
// Clear the 'output' text area
function clr() {
var out = getElement("output");
out.value = "";
}
// Print to the 'output' HTML element and ADDS the line break
function println(x) {
if (arguments.length === 0) x = '';
print(x + '\n');
}
Now I just need to know how to get the value of these positions within the array so I can pull out the same positions from my states array and display them both side by side. Both arrays have the identical amount of items.
I hope this makes sense and thanks in advance to anyone who has time to take a look at this.
Best regards,
-E
Its a little hard to tell what you are trying to accomplish, but I guess you are going for something like:
'use strict'
function code6() {
const populations = ['39000000', '28000000', '21000000'];
const stateNames = ['california', 'texas', 'florida'];
const states = populations.map((population, i) => ({
'name': stateNames[i],
'population': Number(population),
}));
const sum = states.reduce((sum, state) => sum + state.population, 0);
const average = sum / populations.length;
states
.filter(state => state.population < average)
.forEach(state => {
const name = state.name;
const population = state.population;
console.log(`state name: ${name}, population: ${population}`);
});
}
// run the code
code6();
// state name: texas, population: 28000000
// state name: florida, population: 21000000
I took the liberty of refactoring your code to be a little more modern (es6) and Idiomatic. I hope its not to confusing for you. Feel free to ask any questions about it.
In short you should use:
'use strict' at the top of your files
const/let
use map/filter/forEach/reduce to iterate lists.
use meaningfull names
, and you should avoid:
classic indexed for-loop
parseInt
, and pretty much never ever use:
var
If your states array is built with corresponding indices to your pop one, like this:
states; //=> ['Alabama', 'Alaska', 'Arizona', ...]
pop; //=> [4863300, 741894, 6931071, ...]
then you could simply update your print statement to take that into account:
if (pop[i] < avg) {
println(state[i] + ': ' + pop[i]);
}
Or some such.
However, working with shared indices can be a very fragile way to use data. Could you rethink your getData and getData2 functions and combine them into one that returns a structure more like this the following?
states; //=> [
// {name: 'Alabama', pop: 4863300}
// {name: 'Alaska', pop: 741894},
// {name: 'Arizona', pop: 6931071},
// ...]
This would entail changes to the code above to work with the pop property of these objects, but it's probably more robust.
If your pop and state looks like:
var state = ['state1', 'state2', ...];
var pop = ['state1 pop', 'state2 pop', ...];
Then first of all, avg is already wrong. sum's value is running along with the loop turning avg's formula into sum as of iteration / array length instead of sum of all pops / array length. You should calculate the average beforehand. array.reduce will be your friend.
var average = pop.reduce(function(sum, val){return sum + val;}, 0) / pop.length;
Now for your filter operation, you can:
Zip up both arrays to one array using array.map.
Filter the resulting array with array.filter.
Finally, loop through the resulting array using array.forEach
Here's sample code:
var states = ['Alabama', 'Alaska'];
var pop = [4863300, 741894];
var average = pop.reduce(function(sum, val){return sum + val;}) / pop.length;
console.log('Average: ' + average);
states.map(function(state, index) {
// Convert 2 arrays to an array of objects representing state info
return { name: state, population: pop[index] };
}).filter(function(stateInfo) {
console.log(stateInfo);
// Filter each item by returning true on items you want to include
return stateInfo.population < average;
}).forEach(function(stateInfo) {
// Lastly, loop through your results
console.log(stateInfo.name + ' has ' + stateInfo.population + ' people');
});