Объединение двух объектов в JS и выбор нескольких значений на основе одного ввода

Question

ПРОБЛЕМА:

I * sh, чтобы объединить два объекта вместе и выбрать несколько значений на основе целочисленного ввода. Более конкретно, я хочу назначить источник изображения и alt-title для элемента <img> на основе целочисленного ввода.

CODE:

JS объект № 1

const sources = {
  1: "assets/images/newyorktimes.png",
  2: "assets/images/cnn.png",
  3: "assets/images/bbc.png",
  4: "assets/images/washingtonpost.png"
};

JS объект № 2

const sourcenames = {
  1: "New York Times",
  2: "CNN",
  3: "BBC",
  4: "Washington Post"
};

ВХОДНОЕ ЗНАЧЕНИЕ:

Я получаю входное значение из параметра, который я деконструирую следующим образом:

const { 
  fictionsource: fictionSrc,  // INPUT HERE (e.g., 1)
  content: contentSrc         // CONTENT HERE
} = stimulus;

Я назначаю содержимое следующим образом:

const newsContent = node.querySelector(".js-news-content");
newsContent.innerHTML = contentSrc;

Теперь я буду sh для назначения источника изображения и альт-текста на основе входного значения. Например, если значение равно 1, то I sh должно произойти следующее:

const newsImage = node.querySelector(".js-news-image img");
// Assign assets/images/newyorktimes.png to src-attribute
// Assign New York Times to alt-attribute

Желаемый результат:

Рекомендуемый подход для объединения два объекта и назначить источник изображения и альтернативный текст на основе входного значения.

Answer 1

Вам нужно что-то вроде этого:

// In principle is better to have 
// empty objects.
const sources = Object.assign(Object.create(null),{
  1: "assets/images/newyorktimes.png",
  2: "assets/images/cnn.png",
  3: "assets/images/bbc.png",
  4: "assets/images/washingtonpost.png"
});

const sourcenames = Object.assign(Object.create(null),{
  1: "New York Times",
  2: "CNN",
  3: "BBC",
  4: "Washington Post"
});

// Here we hardcode 
// the case when fictionsource 
// is equal to 1. 
const stimulus = {
  fictionsource: 1,
  content: "<div>test</div>"
}

const { 
  fictionsource: fictionSrc,  // INPUT HERE (e.g., 1)
  content: contentSrc         // CONTENT HERE
} = stimulus;


const newsImage = node.querySelector(".js-news-image img");

if (newsImage && typeof sources[fictionSrc] !== 'undefined' && typeof sourcenames[fictionSrc] !== undefined) {
   newsImage.setAttribute("src", sources[fictionSrc]);
   newsImage.setAttribute("alt", sourcenames[fictionSrc]);
} else {
    throw new Error("Incorrect data");
}

Вот как вы можете "объединить" объекты в один:

const sources = {
  1: "assets/images/newyorktimes.png",
  2: "assets/images/cnn.png",
  3: "assets/images/bbc.png",
  4: "assets/images/washingtonpost.png"
};

const sourcenames = {
  1: "New York Times",
  2: "CNN",
  3: "BBC",
  4: "Washington Post"
};

const result = {}

Object.keys(sources).forEach((x) => {
    result[sources[x]] = sourcenames[x];
});

console.log(result);

И одна идея лучше:

const sources = {
  1: "assets/images/newyorktimes.png",
  2: "assets/images/cnn.png",
  3: "assets/images/bbc.png",
  4: "assets/images/washingtonpost.png"
};

const sourcenames = {
  1: "New York Times",
  2: "CNN",
  3: "BBC",
  4: "Washington Post"
};

const result = Object.keys(sources).reduce((acc, value) => {
    acc[sources[value]] = sourcenames[value];
    return acc;
},Object.create(null));

console.log(result);

В случае, если вы хотите сохранить индексы и иметь вложенные объекты, проверьте этот пример:

const sources = Object.assign(Object.create(null), {
    1: "assets/images/newyorktimes.png",
    2: "assets/images/cnn.png",
    3: "assets/images/bbc.png",
    4: "assets/images/washingtonpost.png"
});

const sourcenames = Object.assign(Object.create(null),{
    1: "New York Times",
    2: "CNN",
    3: "BBC",
    4: "Washington Post"
});

const result = Object.keys(sources).
filter((key) => typeof sourcenames[key] !== 'undefined').
reduce((acc, value) => {
    acc[value] = Object.assign(Object.create(null), {
        source: sources[value],
        sourcename: sourcenames[value]
    });
    return acc;
},Object.create(null));

console.log(result);

Редактировать: если вы используете массив вместо объекта, то у минусов немного медленный доступ к элементам. Вам нужно будет найти в массиве соответствующий элемент. Это в случае, если у вас нет индексов массива.

Answer 2

Вы можете l oop через ваши объекты, например так:

let source = null
for(var key in sources){
     if ( value == key ) // value is the number you are looking for
           sources = sources.key
}
newsImage.src = source

Но было бы проще, если бы ваши объекты были массивом, тогда вы могли бы получить к нему прямой доступ:

sources = ["assets/images/newyorktimes.png", "assets/images/cnn.png", "assets/images/bbc.png", "assets/images/washingtonpost.png" ]
newsImage.src = sources[value]

Надеюсь, что это поможет!