Filter array of objects values for strings with image extentions

Question

I am trying to filter through an array of objects to find all values with an image extension then push the values found into their own array. Example: imageArray = ["steve.jpg", "funimage1.jpg", "coolimage2.png","greatimage3.svg", "jimmysavatar.jpg" ...].

Here is a jsfiddle to test: https://jsfiddle.net/25pmwsee/

const myArray = [{
  "prepend": false,
  "name": "steve",
  "avatar": "steve.jpg",
  "imgs": [
    "funimage1.jpg",
    "coolimage2.png",
    "greatimage3.svg"
  ]
},
{
  "prepend": false,
  "name": "jimmy",
  "avatar": "jimmysavatar.jpg",
  "imgs": [
    "realimage1.jpg",
    "awesomeimage2.png",
    "coolimage3.svg"
  ]
}]

const extensions = [".jpg", ".png", ".svg"];
let imageArray = [];

// search in array for extension then push key to array
for (let i = 0; i < extensions.length; i++) {
  if ( extensions[i] in myArray ) {
    imageArray.push(image)
  }
}

Will avatar always contain an images or sometimes? – Willem van der Veen Mar 15 '18 at 23:19 — Willem van der Veen, Mar 15 '18 at 23:19

yajiv · Accepted Answer · 2018-03-16T00:01:12.260

Try this, I iterate through object and check if object has property as object then iterate through it and add if find any image.

const myArray = [{
  "prepend": false,
  "name": "steve",
  "avatar": "steve.jpg",
  "imgs": [
    "funimage1.jpg",
    "coolimage2.png",
    "greatimage3.svg"
  ]
},
{
  "prepend": false,
  "name": "jimmy",
  "avatar": "jimmysavatar.jpg",
  "imgs": [
    "realimage1.jpg",
    "awesomeimage2.png",
    "coolimage3.svg"
  ]
}]

const extensions = [".jpg", ".png", ".svg"];
let imageArray = [];

// search in array for extension then push key to array
function iterate(obj){
  for(var x in obj){
    //console.log(typeof(obj[x]));
    if(typeof(obj[x])==='object'){
      iterate(obj[x]);
    }
    else if (obj.hasOwnProperty(x)){
        extensions.forEach(function(e){
            if(typeof(obj[x])==='string' && obj[x].endsWith(e))
              imageArray.push(obj[x]);
        })
    }
  } 
}
myArray.forEach(function(x){iterate(x)})
console.log(imageArray);

this way was verbose enough for a more complex array and did not return any errors. thanks everyone — alt-rock, Mar 16 '18 at 01:06

Matt Mokary · Answer 2 · 2018-03-15T23:38:37.703

// regular expression to match a file extension and capture it
const extensionRegex = /\.([a-z]+)$/

// map of allowed extensions; indexing by any not listed will be falsy (undefined)
const allowedExtensions = {
    'jpg': true,
    'png': true,
    'svg': true
}

// grab each user's avatar
let avatars = myArray.map(function (user) {
    return user.avatar
})

// takes all the imgs arrays and flatten them down to an array of strings
let imgs = myArray.map(function (user) {
    return user.imgs
}).reduce(function (flattened, images) {
    return flattened.concat(images)
}, [])

avatars.concat(imgs).forEach(function (imageName) {
    // if imageName is undefined or empty, use empty string instead
    // since we know that will fail the allowedExtensions check and not push
    let extension = (imageName || '').match(extensionRegex)[1]

    if (allowedExtensions[extension]) {
        imageArray.push(imageName);
    }
});

Some reference links:

How do you access the matched groups in a JavaScript regular expression?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Filter array of objects values for strings with image extentions

2 Answers2