Amit Erandole Amit Erandole - 6 months ago 28
Javascript Question

Javascript: merge two arrays into single object without losing key order

I have some raw imdb data in two strings:

var headers = "ID imdbID Title Year Rating Runtime Genre Released Director Writer Cast Metacritic imdbRating imdbVotes Poster Plot FullPlot Language Country Awards lastUpdated";


const content = "1 tt0000001 Carmencita 1894 NOT RATED 1 min Documentary, Short William K.L. Dickson Carmencita 5.8 1136 http://ia.media-imdb.com/images/M/MV5BMjAzNDEwMzk3OV5BMl5BanBnXkFtZTcwOTk4OTM5Ng@@._V1_SX300.jpg Performing on what looks like a small wooden stage, wearing a dress with a hoop skirt and white high-heeled pumps, Carmencita does a dance with kicks and twirls, a smile always on her face. USA 2016-05-04 00:03:31.600000000";


Of course I am cleaning out the tabs and spaces etc and creating two arrays like so:

const values = content.split(/(\t+)/).filter( (part) => !/\t/.test(part) );

let keys = headers.split(/(\s+)/).filter( (part) => !/\s+/.test(part) );


Now I want to map the keys in
keys
array to the values in the
values
array accurately. So I do a reduce like so:

var result = {};

values.reduce( (acc, val, index) => {
return result[ keys[index] ] = val;
}, result);


This gives me back a final
result
object that looks like this:

{
Cast: "1136",
Director: "Carmencita",
Genre: "Documentary, Short",
ID: "1",
imdbID: "tt0000001",
imdbRating: "Performing on what looks like a small wooden stage, wearing a dress with a hoop skirt and white high-heeled pumps, Carmencita does a dance with kicks and twirls, a smile always on her face.",
imdbVotes: "USA",
Metacritic: "http://ia.media-imdb.com/images/M/MV5BMjAzNDEwMzk3OV5BMl5BanBnXkFtZTcwOTk4OTM5Ng@@._V1_SX300.jpg",
Poster: "2016-05-04 00:03:31.600000000",
Rating: "NOT RATED",
Released: "William K.L. Dickson",
Runtime: "1 min",
Title: "Carmencita",
Writer: "5.8",
Year: "1894"
}


As you can see, the order is all mixed up! How do I get the right order in my data so I get
title
key mapped to the movie title value etc. ?

I am open to using a library like
lodash
to achieve this but can't tell what I should use? Here is a jsbin demo of the present state: https://jsbin.com/gekawi/edit?js,console

Answer

If you take the raw data with the tabs inside, you could use them for splitting.

var headers = "ID	imdbID	Title	Year	Rating	Runtime	Genre	Released	Director	Writer	Cast	Metacritic	imdbRating	imdbVotes	Poster	Plot	FullPlot	Language	Country	Awards	lastUpdated",
    content = "1	tt0000001	Carmencita	1894	NOT RATED	1 min	Documentary, Short		William K.L. Dickson		Carmencita		5.8	1136	http://ia.media-imdb.com/images/M/MV5BMjAzNDEwMzk3OV5BMl5BanBnXkFtZTcwOTk4OTM5Ng@@._V1_SX300.jpg	Performing on what looks like a small wooden stage, wearing a dress with a hoop skirt and white high-heeled pumps, Carmencita does a dance with kicks and twirls, a smile always on her face.			USA		2016-05-04 00:03:31.600000000",
    headerArray = headers.split(/\t/),
    contentArray = content.split(/\t/),
    object = {};

headerArray.forEach(function (k, i) {
    object[k] = contentArray[i];
});

console.log(object);