Сравнение массива с массивом объектов - PullRequest
Новая
       2

Сравнение массива с массивом объектов

0 голосов
/ 26 апреля 2020

У меня есть следующий массив и массив объектов. 

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"
  },
];

Я пытаюсь сопоставить строковое значение componentName с imageObjects. Моя цель состоит в том, чтобы получить изображение под ImageObjects. 

const generateDishes = () => {

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

  }
};

Ответы [ 3 ]

0 голосов
/ 26 апреля 2020

Преобразование другого объекта из изображения Объекты, использующие greadientName в качестве ключа. 

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}
},{})

Теперь вы можете выполнять итерации за O (n) сложности времени. 

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

}
0 голосов
/ 26 апреля 2020

Попробуйте это: 

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"
  },
];

result=imageObjects.filter(({name})=> ingredientName.includes(name)).map((elem)=> elem.image);
console.log(result);
0 голосов
/ 26 апреля 2020

Вы можете сделать это так: 

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 images = ingredientName.map((ingredient) =>
  imageObjects.find((image) => image.name === ingredient).image
);

console.log(images)
...