Develop Reference

Merging two arrays to form new data in Javascript

I have two arrays:
var xArr = [];
xArr.push('FIRST NAME');
xArr.push('LAST NAME');
xArr.push('AGE');
And...
var yArr = [];
yArr.push('JOHN');
yArr.push('SMITH');
yArr.push('28');
Without depending on any kind of looping statement, or converting this into Object, is it possible to concatenate 1st element to 1st element, 2nd element to 2nd element, etc..?
Output would be:
var newArr = [ 'FIRST NAME = JOHN', 'LAST NAME = SMITH', 'AGE = 28' ];

Without depending on any kind of looping statement, or converting this into Object, is it possible to concatenate 1st element to 1st element, 2nd element to 2nd element, etc..?
No, it's not possible, since you want to perform an action for every element in the array what needs a loop.
NOTE: You could do it manually using index's but that will be the wrong way since if you have a long array it will be difficult...

regardless of requirement doing something like this
maybe stupid but okey
xArr = [];
xArr.push('FIRST NAME');
xArr.push('LAST NAME');
xArr.push('AGE');
yArr = [];
yArr.push('JOHN');
yArr.push('SMITH');
yArr.push('28');
console.log(xArr);
console.log(yArr);
function merger(arr1,arr2){
var newArr=[];
for(var i = 0; i<arr1.length; i++){
newArr.push(arr1[i]+' = '+arr2[i]);
}
console.log(newArr);
return newArr;
}
merger(xArr, yArr)
jsfiddle

how can I filter an array without losing the index?

I have two really long arrays containing "picture names" and "picture files". The first one represents the actual name of the pictures, while the second one is just the file name. For example:
picturenames[0] = '0 - zero';
picturenames[1] = '1 - one';
picturenames[2] = '1 o\'clock';
...
picturefiles[0] = 'numbers-zero.jpg';
picturefiles[1] = 'numbers-one.jpg';
picturefiles[2] = 'time-1.jpg';
...
I have about 1000 items in each array in several languages (the picture files are always the same). I'm "recycling" these arrays from the previous application to save some time and avoid rewriting everything anew.
Desirable functionality: using the user's input in a textbox I want to filter the picturenames array and then show the correspondant picturefiles image.
The issue I'm facing: when I filter the picturenames array I lose the index and I can't "reach" the picture file name.
This is the code I'm using to filter the picturenames array.
var matches = picturenames.filter(function(windowValue){
if(windowValue) {
return windowValue.indexOf(textToFindLower) >= 0;
}
});
What would be the best way to do this?
UPDATE: the solution proposed by Ahmed is the best one, but for time reasons and negligible performance issues I'm just using a for loop to search trough the array, as follows:
var matchesCounter = new Array();
for (i = 0; i < picturenames.length; i++) {
if (picturenames[i].indexOf(textToFindLower) >= 0) {
matchesCounter.push(i);
}
}
console.log(matchesCounter);
for (i = 0; i < matchesCounter.length; i++) {
console.log(picturenames[i]);
console.log(picturefiles[i]);
}

Try this:
const foundIndicies = Object.keys(picturenames).filter(pictureName => {
pictureName.includes(textToFindLower)
});
// reference picturefiles[foundIndicies[0]] to get the file name
Though, it would be far nicer to have both the name and the file in a single object, like so:
const pictures = [
{
name: '0 - zero',
file: 'numbers-zero.jpg',
},
{
name: '1 - one',
file: 'numbers-one.jpg',
}
];
const foundPictures = pictures.filter(picture => picture.name.includes('zero'));
if (foundPictures[0]) console.log(foundPictures[0].file);

You can add one property index during the filtering time, then later on you can use the index.
var matches = picturenames.filter(function(windowValue, index){
if(windowValue) {
windowValue.index = index;
return windowValue.comparator(textToFindLower) >= 0;// Need to define comparator function
}
});
Later on you can access by using like follows:
picturefiles[matches[0].index]
However, the solution will work on object, not primitive type string.
If your data type is string, then you have to convert as object and put the string as a property value like name. The snippet is given below:
var picturenames = [];
var picturefiles = [];
picturenames.push({name:'0 - zero'});
picturenames.push({name:'1 - one'});
picturenames.push({name:'1 o\'clock'});
picturefiles.push({name:'numbers-zero.jpg'});
picturefiles.push({name:'numbers-one.jpg'});
picturefiles.push({name: 'time-1.jpg'});
var textToFindLower = "0";
var matches = picturenames.filter(function(windowValue, index){
if(windowValue) {
windowValue.index = index;
return windowValue.name.indexOf(textToFindLower) >= 0;
}
});
console.log(matches);

For loop not performing last function in array (JavaScript)

The last function in the boxFill() array is not being performed. I've tried accounting for the length of the array but to no luck. (I'm very new to js, just saying). It iterates through the first four indices, and always does not perform the last index, even when I change the position of the index.
var pResult1 = document.getElementById("result1");
var pResult2 = document.getElementById("result2");
var pResult3 = document.getElementById("result3");
var pResult4 = document.getElementById("result4");
var pResult5 = document.getElementById("result5");
var pResult = [pResult1,pResult2,pResult3,pResult4,pResult5]
function checkBox() {
/*var aFlor = [2.8,"Florida","Science"];
var bGeo = [3.5,"Georgia","Business"];
var cTex = [2.3,"Texas","Health"];
var dNew = [4.2,"NewYork","Law"];
var eMic = [3.9,"Michigan","Humanities"];*/
var boxValue = document.getElementById("searchBox").value;
var boxFill = [
function(){listBox('1','Florida state Scholarship','3.5','Florida','Applied Sciences')},
function(){listBox('2','Great Achievers Scholarship','4.0','Texas','Health')},
function(){listBox('3','Helpful Future Scholarship','3.0','Georgia','Business')},
function(){listBox('4','Never Give Up Scholarship','2.0','Michigan','Humanities')},
function(){listBox('5','Times Square Talent Scholarship','3.5','New York','Law')}
]
if (boxValue.includes("f")) {
for (i=0;i<boxFill.length+1;i++) {
boxFill[i]();
}
function listBox(number,name,gpa,state,major) {
pResult[number].innerHTML =
"<dl><dt>"+number+". "+name+"</dt><dd>- minimum GPA is: "+gpa+"</dd><dd>- You must live in "+state+"</dd><dd>- For the "+major+" major!</dd></dl>";
}
Is there a direct problem with the for loop or is it something in the array itself?

i<boxFill.length+1 should be i<boxFill.length, otherwise your loop iterates one more time than there are elements.
The function gets called, but it will throw an error because it tries to access an index in pResult that doesn't exist. If you open your browser's console you should see an error such as
Cannot read property 'innerHTML' of undefined
Arrays are zero-indexed in JavaScript. That means that pResult[0] will access the first element, pResult[1] accesses the second element, etc.
Now, the last function in boxFill tries to access pResult[5], i.e. the sixth element. But pResult only has five elements!
You need pass the values 0 to 4 to listBox, not 1 to 5:
var boxFill = [
function(){listBox(0,'Florida state Scholarship','3.5','Florida','Applied Sciences')},
function(){listBox(1,'Great Achievers Scholarship','4.0','Texas','Health')},
function(){listBox(2,'Helpful Future Scholarship','3.0','Georgia','Business')},
function(){listBox(3,'Never Give Up Scholarship','2.0','Michigan','Humanities')},
function(){listBox(4,'Times Square Talent Scholarship','3.5','New York','Law')}
]
Or if you want to pass 1-5 then you need to subtract 1 when accessing the index:
pResult[number-1].innerHTML = ...;

access javascript array element by JSON object key

I have an array that looks like this
var Zips = [{Zip: 92880, Count:1}, {Zip:91710, Count:3}, {Zip:92672, Count:0}]
I would like to be able to access the Count property of a particular object via the Zip property so that I can increment the count when I get another zip that matches. I was hoping something like this but it's not quite right (This would be in a loop)
Zips[rows[i].Zipcode].Count
I know that's not right and am hoping that there is a solution without looping through the result set every time?
Thanks

I know that's not right and am hoping that there is a solution without
looping through the result set every time?
No, you're gonna have to loop and find the appropriate value which meets your criteria. Alternatively you could use the filter method:
var filteredZips = Zips.filter(function(element) {
return element.Zip == 92880;
});
if (filteredZips.length > 0) {
// we have found a corresponding element
var count = filteredZips[0].count;
}
If you had designed your object in a different manner:
var zips = {"92880": 1, "91710": 3, "92672": 0 };
then you could have directly accessed the Count:
var count = zips["92880"];

In the current form, you can not access an element by its ZIP-code without a loop.
You could transform your array to an object of this form:
var Zips = { 92880: 1, 91710: 3 }; // etc.
Then you can access it by
Zips[rows[i].Zipcode]
To transform from array to object you could use this
var ZipsObj = {};
for( var i=Zips.length; i--; ) {
ZipsObj[ Zips[i].Zip ] = Zips[i].Count;
}

Couple of mistakes in your code.
Your array is collection of objects
You can access objects with their property name and not property value i.e Zips[0]['Zip'] is correct, or by object notation Zips[0].Zip.
If you want to find the value you have to loop

If you want to keep the format of the array Zips and its elements
var Zips = [{Zip: 92880, Count:1}, {Zip:91710, Count:3}, {Zip:92672, Count:0}];
var MappedZips = {}; // first of all build hash by Zip
for (var i = 0; i < Zips.length; i++) {
MappedZips[Zips[i].Zip] = Zips[i];
}
MappedZips is {"92880": {Zip: 92880, Count:1}, "91710": {Zip:91710, Count:3}, "92672": {Zip:92672, Count:0}}
// then you can get Count by O(1)
alert(MappedZips[92880].Count);
// or can change data by O(1)
MappedZips[92880].Count++;
alert(MappedZips[92880].Count);
jsFiddle example

function getZip(zips, zipNumber) {
var answer = null;
zips.forEach(function(zip){
if (zip.Zip === zipNumber) answer = zip;
});
return answer;
}
This function returns the zip object with the Zip property equal to zipNumber, or null if none exists.

did you try this?
Zips[i].Zip.Count

Remove items from based of substring in array jquery

This might seems a very newbie sort of question, but I am struggling with this as of now and seek some help.
Here is a example array in JavaScript
var SelectedFilters = ["[size:12:12]","[size:12:12]","[size:13:13]","[size:14:14]", "[color:14:14]","[color:14:14]","[type:14:14]","[type:14:14]"];
Now I wish to remove certain items from this array based on a search term, now the search term contains only a part of string such as
var searchTerm1 = 'size'
var searchTerm2 = 'color'
I have already tried the following code, but its not working:
var i = SelectedFilters.indexOf(searchTerm1);
if (i != -1)
{
SelectedFilters.splice(i, 1);
}
I have also tried running to through for loop, to iterate on all items, but again search failed as its not able to match 'size' OR 'color'
What I am looking: if searchterm1 is used, the resulted output will be like:
["[color:14:14]","[color:14:14]","[type:14:14]","[type:14:14]"];
and in case of searchterm2 is used the resulted output should be:
["[size:12:12]","[size:12:12]","[size:13:13]","[size:14:14]","[type:14:14]","[type:14:14]"];
It would be great if anyone can solve this puzzle, I am also trying to find a solution in the meantime.

Your attempt didn't work because .indexOf() on an Array looks for an exact match.
Since according to your question and comment you need to mutate the original Array, you should loop over the array and test each string individually and then call .splice() every time you find one that needs to be removed.
var SelectedFilters = ["[size:12:12]","[size:12:12]","[size:13:13]","[size:14:14]", "[color:14:14]","[color:14:14]","[type:14:14]","[type:14:14]"];
var searchTerm1 = 'size'
var searchTerm2 = 'color'
for (var i = SelectedFilters.length-1; i > -1; i--) {
if (SelectedFilters[i].startsWith(searchTerm1, 1)) {
SelectedFilters.splice(i, 1)
}
}
document.querySelector("pre").textContent =
JSON.stringify(SelectedFilters, null, 2)
<pre></pre>
The loop used above goes in reverse. This is important since every time we do a .splice(), the array gets reindexed, so if we went forward, we would end up skipping over adjacent items to be removed.
The .startsWith() method checks if the string starts with the given search term. I passed the second parameter a value of 1 so that it starts searching on the second character.

You can use filter method of array
var searchTerm = "size";
SelectedFilters = SelectedFilters.filter(function(val){
return val.indexOf( searchTerm ) == -1;
});

You can do it with Array#filter,
var searchTerm1 = 'size';
var result = SelectedFilters.filter(v => !v.includes(searchTerm1));
console.log(result); //["[color:14:14]","[color:14:14]","[type:14:14]","[type:14:14]"];
If you want to alter the original array then do,
var SelectedFilters = ["[size:12:12]", "[size:12:12]", "[size:13:13]", "[size:14:14]", "[color:14:14]", "[color:14:14]", "[type:14:14]", "[type:14:14]"];
var searchTerm1 = 'size',cnt = 0, len = SelectedFilters.length - 1;
while (cnt <= len) {
if (SelectedFilters[len - cnt].includes(searchTerm1)) SelectedFilters.splice(len - cnt, 1);
cnt++;
}
console.log(SelectedFilters);
DEMO