Analyzing and contrasting two distinct arrays in Javascript

Question

Analyzing and contrasting two distinct arrays in Javascript

Is there anyone who can help me with this task? I am attempting to compare two separate arrays and push values when the comparison is equal. The arrays in question are imageslide (including therapy) and totalValues. My goal is to compare names like cats and dogs, and if a condition is met, I want to push their respective image URLs.


var imageslide = {
    "therapy": [
        {
            "name": "cats",
            "images": [
                { "url": "cat/firstimg.jpg" },
                { "url": "cat/secondimg.jpg" },
                { "url": "cat/thirdimg.jpg" },
                { "url": "cat/fourthimg.jpg" }
            ]
        },

        {
            "name": "dogs",
            "images": [
                { "url": "dog/firstdog.jpeg" },
                { "url": "dog/seconddog.jpg" },
                { "url": "dog/thirddog.jpg" },
                { "url": "dog/fourthdog.jpg" }
            ]
        },
    ]
}

var totalValues = ["cats", "dogs"];

I have attempted the following approach:


var imageArray = imageslide.therapy
function compare(imageArray, totalValues ){
    imageArray.forEach((e1) => totalValues.forEach((e2) => {
        if(e1.name == e2){
            console.log(e1.name, ",", e2)
        }
    })
}

javascript html css

Answer 1

Answer №1

Based on your inquiry, I have provided an answer using simple JavaScript since my knowledge of arrow functions is limited.

var imageslide = {
    "therapy": [
                    {
                        "name": "cats",
                        "images": [
                            { "url": "cat/firstimg.jpg" },
                            { "url": "cat/secondimg.jpg" },
                            { "url": "cat/thirdimg.jpg" },
                            { "url": "cat/fourthimg.jpg" }
                        ]
                    },

                    {
                        "name": "dogs",
                        "images": [
                            { "url": "dog/firstdog.jpeg" },
                            { "url": "dog/seconddog.jpg" },
                            { "url": "dog/thirddog.jpg" },
                            { "url": "dog/fourthdog.jpg" }
                        ]
                    },

                ]
}
var totalValues = ["cats","dogs"];
var imageArray = imageslide.therapy
function compare(imageArray,totalValues ){
    for(var i=0;i<imageArray.length;i++){
        for(var j=0;j<totalValues.length;j++){
            if(totalValues[j]=imageArray[i].name){
                console.log(imageArray[i].name+"=="+totalValues[j]);
                //imageArray[i].images.push({"url": "https://hexasoft.io"});
                //break;
                return imageArray[i].images;
            }
        }

    }
    //printResult(imageArray);
    return [];
}
function printResult(resultArray){
    for(var i=0;i<resultArray.length;i++) {
        console.log(resultArray[i].name);
        for(var j=0;j<resultArray[i].images.length;j++){
            console.log(resultArray[i].images[j]);
        }
    }
}
images = compare(imageArray, totalValues);
if(images.length > 0){
     for(var i=0;i<images.length; i++){
         images[i].push({"url": "your url"});
     }  
}

Answer 2

Based on your inquiry, I have provided an answer using simple JavaScript since my knowledge of arrow functions is limited.

var imageslide = {
    "therapy": [
                    {
                        "name": "cats",
                        "images": [
                            { "url": "cat/firstimg.jpg" },
                            { "url": "cat/secondimg.jpg" },
                            { "url": "cat/thirdimg.jpg" },
                            { "url": "cat/fourthimg.jpg" }
                        ]
                    },

                    {
                        "name": "dogs",
                        "images": [
                            { "url": "dog/firstdog.jpeg" },
                            { "url": "dog/seconddog.jpg" },
                            { "url": "dog/thirddog.jpg" },
                            { "url": "dog/fourthdog.jpg" }
                        ]
                    },

                ]
}
var totalValues = ["cats","dogs"];
var imageArray = imageslide.therapy
function compare(imageArray,totalValues ){
    for(var i=0;i<imageArray.length;i++){
        for(var j=0;j<totalValues.length;j++){
            if(totalValues[j]=imageArray[i].name){
                console.log(imageArray[i].name+"=="+totalValues[j]);
                //imageArray[i].images.push({"url": "https://hexasoft.io"});
                //break;
                return imageArray[i].images;
            }
        }

    }
    //printResult(imageArray);
    return [];
}
function printResult(resultArray){
    for(var i=0;i<resultArray.length;i++) {
        console.log(resultArray[i].name);
        for(var j=0;j<resultArray[i].images.length;j++){
            console.log(resultArray[i].images[j]);
        }
    }
}
images = compare(imageArray, totalValues);
if(images.length > 0){
     for(var i=0;i<images.length; i++){
         images[i].push({"url": "your url"});
     }  
}

Answer 3

Answer №2

Explore the capabilities of the JavaScript filter function by checking out the documentation (Link).

If you need to filter images based on an animal name, you can use a similar approach:

function retrieveAnimalImagesByName(animal_name){
  var imageArray = imageslide.animalGallery;
  
  var filteredImages = imageArray.filter(animalData => {
    return animalData.name === animal_name;
  })
  return filteredImages[0].images;
}

Answer 4

Explore the capabilities of the JavaScript filter function by checking out the documentation (Link).

If you need to filter images based on an animal name, you can use a similar approach:

function retrieveAnimalImagesByName(animal_name){
  var imageArray = imageslide.animalGallery;
  
  var filteredImages = imageArray.filter(animalData => {
    return animalData.name === animal_name;
  })
  return filteredImages[0].images;
}

Answer 5

Answer №3

If you want to give it a shot, here's a method that will provide URLs for each item in the totalValues array.

var totalValues = ["dogs"];
var videos = videoclip.soothing;

function retrieve(videos, totalValues ){
  let result;
  for( value of totalValues ) {
    for( thisVid of videos ) {
      if( thisVid.title == value ){
        result = thisVid.links;
      }
    }
  }
  
  return result;
}

Answer 6

If you want to give it a shot, here's a method that will provide URLs for each item in the totalValues array.

var totalValues = ["dogs"];
var videos = videoclip.soothing;

function retrieve(videos, totalValues ){
  let result;
  for( value of totalValues ) {
    for( thisVid of videos ) {
      if( thisVid.title == value ){
        result = thisVid.links;
      }
    }
  }
  
  return result;
}

Answer 7

Answer №4

If you're looking to generate a flat array of image URLs called pics, you can achieve that with the code below:

const pics = [].concat(...imageslide.therapy.map(element => {
  if (totalValues.indexOf(element.name) > -1) 
    return element.images.map(img => img.url)
}))
console.log(pics);

Answer 8

If you're looking to generate a flat array of image URLs called pics, you can achieve that with the code below:

const pics = [].concat(...imageslide.therapy.map(element => {
  if (totalValues.indexOf(element.name) > -1) 
    return element.images.map(img => img.url)
}))
console.log(pics);

Answer 9

Answer №5

function checkImages(imageSet, valueList) {
    for (var x = 0; x < imageSet.length; x++) {
        for (var y = 0; y < valueList.length; y++) {
            if (valueList[y] == imageSet[x].title) {
                selectedImages.push(imageSet[x].urls);
                for (var i = 0; i < selectedImages.length; i++) {
                   for(var j = 0; j < selectedImages[i].length; j++){
                    displayImage(selectedImages[i][j].link);
                }
                }
            }
        }
    }
    showSelectedImages(current_index);
}

Answer 10

function checkImages(imageSet, valueList) {
    for (var x = 0; x < imageSet.length; x++) {
        for (var y = 0; y < valueList.length; y++) {
            if (valueList[y] == imageSet[x].title) {
                selectedImages.push(imageSet[x].urls);
                for (var i = 0; i < selectedImages.length; i++) {
                   for(var j = 0; j < selectedImages[i].length; j++){
                    displayImage(selectedImages[i][j].link);
                }
                }
            }
        }
    }
    showSelectedImages(current_index);
}

Analyzing and contrasting two distinct arrays in Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Invoking res.download() in the Express framework

Error installing npm: Dependencies could not be loaded for installation

What methods can be used to verify that a modal jquery dialog does not have focus anymore?

Dynamic field validation using jQuery

Updating the state of an object nested within another object in React JS

Placing the overview right beneath the navigation bar in Bootstrap

A design with three columns that stretch to 100% height using CSS styling

Incorporate the user's input text into the paragraph

What is the best way to access and compare the values within each <td> element?

Ensure that the left menu remains fixed at full page height of 100%

Error: When attempting to send a message in a different channel, an undefined property 'send' is encountered causing a TypeError

Why isn't the Vue component refreshing its view after the state changes in Vuex?

The parameter type 'Function' cannot be assigned to the parameter type 'ComponentType<never>'

Discover the process of connecting a REST controller with AngularJS and Spring

Assign a custom value to the ng-options and ensure that the first option is selected by default

Align text vertically above and below an input field labeled using tailwindcss

The NPM package manager is unable to locate jquery.js and jquery.keyframes.js

JavaScript problem with hovering action causing additional buttons to appear

tips for choosing a specific dropdown menu item

The width of mat-table columns remains static even with the presence of an Input field