Merging two objects in JS and select multiple values based on single input

PROBLEM:

I wish to merge two objects together and select multiple values based on an integer input. More specifically, I want to assign image source and alt-title to a <img> element based on an integer input.

CODE:

JS object #1

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

JS object #2

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

INPUT VALUE:

I get the input value from a parameter, which I deconstruct in the following way:

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

I assign content in the following way:

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

Now, I wish to assign image source and alt-text based on the input value. For instance, if the value is 1, then I wish the following to happen:

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

DESIRED OUTPUT:

The recommended approach to combine the two objects and to assign image source and alt-text based on input value.

You need something like this:

// 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");
}

This is how you can "merge" the objects in one:

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);

And one idea better:

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);

In case you want to keep the indexes and have nested objects check this example:

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);

Edit: If you use array instead object the cons is in a bit slow access
to elements. You will need to search in the array for according element. This is in case if you don't have array indexes.

You could loop through your objects like this :

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

But it would be easyer if your objects were array, then you could access it directly :

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

Hope this help !