Contrasting an array of items with an array of Objects

Question

Contrasting an array of items with an array of Objects

I need to match the values in an array called ingredientName with a corresponding array of objects. Here is how they look:

const ingredientName = ['chicken', 'cheese', 'tomato', 'lettuce'];

let imageObjects = [
  {
    name: 'chicken',
    image: "https://spoonacular.com/cdn/ingredients_100x100/whole-chicken.jpg"
  },
  {
    name: 'cheese',
    image: "https://spoonacular.com/cdn/ingredients_100x100/cheddar-cheese.png"
  },
  {
    name: 'tomato',
    image: "https://spoonacular.com/cdn/ingredients_100x100/tomato.png"
  },
  {
    name: 'lettuce',
    image: "https://spoonacular.com/cdn/ingredients_100x100/iceberg-lettuce.jpg"
  },
];

The goal is to retrieve the image associated with each ingredient from ImageObjects.

const generateDishes = () => {

  for (let i = 0; i < ingredientName.length; i++) {
    for (let j = 0; j < imageObjects.length; j++) {
        if (ingredientName[i] == imageObjects[j].name) {
            const newImage = $('<img>').attr('src', imageObjects[j].image)
            $('#dishRect1').append(newImage)
        }
    }

  }
};

javascript arrays javascript-objects

Answer 1

Answer №1

Here's one way to accomplish it:

const ingredientList = ["beef", "cheese", "tomato", "onion"];

let imageBank = [{
    name: "beef",
    image: "https://example.com/beef.jpg",
  },
  {
    name: "cheese",
    image: "https://example.com/cheese.png",
  },
  {
    name: "tomato",
    image: "https://example.com/tomato.png",
  },
  {
    name: "onion",
    image: "https://example.com/onion.jpg",
  },
];


let ingredientImages = ingredientList.map((ingredient) =>
  imageBank.find((image) => image.name === ingredient).image
);

console.log(ingredientImages)

Answer 2

Here's one way to accomplish it:

const ingredientList = ["beef", "cheese", "tomato", "onion"];

let imageBank = [{
    name: "beef",
    image: "https://example.com/beef.jpg",
  },
  {
    name: "cheese",
    image: "https://example.com/cheese.png",
  },
  {
    name: "tomato",
    image: "https://example.com/tomato.png",
  },
  {
    name: "onion",
    image: "https://example.com/onion.jpg",
  },
];


let ingredientImages = ingredientList.map((ingredient) =>
  imageBank.find((image) => image.name === ingredient).image
);

console.log(ingredientImages)

Answer 3

Answer №2

Utilize a different item from the image Objects by using gradientName as the key.

const ingredientName = ['chicken', 'cheese', 'tomato', 'lettuce'];

let imageObjects = [ { name: 'chicken', image: "https://spoonacular.com/cdn/ingredients_100x100/whole-chicken.jpg" }, { name: 'cheese', image: "https://spoonacular.com/cdn/ingredients_100x100/cheddar-cheese.png" }, { name: 'tomato', image: "https://spoonacular.com/cdn/ingredients_100x100/tomato.png" }, { name: 'lettuce', image: "https://spoonacular.com/cdn/ingredients_100x100/iceberg-lettuce.jpg" }, ];

let imageMap = imageObjects.reduce((agg, {name, image})=>{
  return {...agg, [name]: image}
},{})

Implement iteration with O(n) time complexity now.

for (let i = 0; i < ingredientName.length; i++) {
     const newImage = $('<img>').attr('src', imageMap[ingredientName[i]])
    $('#dishRect1').append(newImage)

}

Answer 4

Utilize a different item from the image Objects by using gradientName as the key.

const ingredientName = ['chicken', 'cheese', 'tomato', 'lettuce'];

let imageObjects = [ { name: 'chicken', image: "https://spoonacular.com/cdn/ingredients_100x100/whole-chicken.jpg" }, { name: 'cheese', image: "https://spoonacular.com/cdn/ingredients_100x100/cheddar-cheese.png" }, { name: 'tomato', image: "https://spoonacular.com/cdn/ingredients_100x100/tomato.png" }, { name: 'lettuce', image: "https://spoonacular.com/cdn/ingredients_100x100/iceberg-lettuce.jpg" }, ];

let imageMap = imageObjects.reduce((agg, {name, image})=>{
  return {...agg, [name]: image}
},{})

Implement iteration with O(n) time complexity now.

for (let i = 0; i < ingredientName.length; i++) {
     const newImage = $('<img>').attr('src', imageMap[ingredientName[i]])
    $('#dishRect1').append(newImage)

}

Answer 5

Answer №3

Give this a shot:

const itemNames = ['apple', 'banana', 'grape', 'orange'];

let itemImages = [
  {
    name: 'apple',
    image: "https://example.com/apple.jpg"
  },
  {
    name: 'banana',
    image: "https://example.com/banana.png"
  },
  {
    name: 'grape',
    image: "https://example.com/grape.png"
  },  
  {
    name: 'orange',
    image: "https://example.com/orange.jpg"
  },
];

result=itemImages.filter(({name})=> itemNames.includes(name)).map((elem)=> elem.image);
console.log(result);

Answer 6

Give this a shot:

const itemNames = ['apple', 'banana', 'grape', 'orange'];

let itemImages = [
  {
    name: 'apple',
    image: "https://example.com/apple.jpg"
  },
  {
    name: 'banana',
    image: "https://example.com/banana.png"
  },
  {
    name: 'grape',
    image: "https://example.com/grape.png"
  },  
  {
    name: 'orange',
    image: "https://example.com/orange.jpg"
  },
];

result=itemImages.filter(({name})=> itemNames.includes(name)).map((elem)=> elem.image);
console.log(result);

Contrasting an array of items with an array of Objects

Answer №1

Answer №2

Answer №3

Similar questions

Identify whether the application is built with nextJS, react, or react-native

Guide on linking JavaScript files in Node.js

Creating a dynamic object for a React component by utilizing props

(node:19502) UnresolvedPromiseRejectionNotification: Promise rejection not handled (rejection id: 1): TypeError: Unable to access property 'indexOf' of undefined

Tips for validating and retrieving data from a radio button paired with an input box in reactjs

Serve different files using Node.js socket.io webserver, not just index.html

Experimenting with the speechSynthesis API within an iOS webview application

Attempting to organize date and time down to the second

Sending JSON Data over URL

Different Ways to Access an Array in an EJS Template

BOOTSTRAP: changing the layout of panels in various sizes for mobile devices

Incorporate VLC player into a webpage without any visible control options

Expanding the MatBottomSheet's Width: A Guide

Troubles arise when compiling TypeScript to JavaScript

Ensuring the checkbox is disabled prior to editing

I am interested in retrieving an array

Unable to Retrieve JSON Output

Maintaining TextBox State in ASP.Net Through Postbacks

What is the best way to start the server when the files are located in separate directories?

What is the best way to integrate a Next.js Image component with a set width and an adaptable height in order to maintain the image's proportions?