Create comma separated strings from multidimensional array

Question

I have a multidimensional array that looks like this:

[
    Object {href="http://www.somepath.com/car4.png", title="Wheel"},
    Object {href="http://www.somepath.com/car.png", title="Top"},
    Object {href="http://www.somepath.com/car1.png", title="Side"},
    Object {href="http://www.somepath.com/car5.png", title="Saddle"},
    Object {href="http://www.somepath.com/car6.png", title="Front"}
]

I'd like to loop over this object and retrieve two comma seperated strings, one for all hrefs and one for all titles. So what I'm after is:

hrefs = "'http://www.somepath.com/car4.png', 'http://www.somepath.com/car.png', 'http://www.somepath.com/car1.png', 'http://www.somepath.com/car5.png', 'http://www.somepath.com/car6.png'";
titles = "'Wheel', 'Top', 'Side', 'Saddle', 'Front'";

Although it seems pretty easy I lack the knowledge and cant seem to find the specific answer.

Answer 1

A simple function that uses map to get the values into an array, and then join them up.

const arr=[{href:"http://www.somepath.com/car4.png",title:"Wheel"},{href:"http://www.somepath.com/car.png",title:"Top"},{href:"http://www.somepath.com/car1.png",title:"Side"},{href:"http://www.somepath.com/car5.png",title:"Saddle"},{href:"http://www.somepath.com/car6.png",title:"Front"}];

function createString(arr, key) {
  return arr
    .map(obj => `'${obj[key]}'`)
    .join(', ');
}

console.log(JSON.stringify(createString(arr, 'href')));
console.log(JSON.stringify(createString(arr, 'title')));

Additional documentation

• Template/string literals

Answer 2

You could do this:

var hrefs = [],
    titles = [];

data.forEach(function(obj) {
    hrefs.push("'" + obj.href + "'");
    titles.push("'" + obj.title + "'");
});

hrefs = hrefs.join(', ');
titles = titles.join(', ');

Answer 3

var data = [
    {href:"http://www.somepath.com/car4.png", title:"Wheel"},
    {href:"http://www.somepath.com/car.png", title:"Top"},
    {href:"http://www.somepath.com/car1.png", title:"Side"},
    {href:"http://www.somepath.com/car5.png", title:"Saddle"},
    {href:"http://www.somepath.com/car6.png", title:"Front"}
],
href = [],
title = [],
dataL = data.length;

for ( i = 0; i < dataL; i++ ){
   href.push ( data[i]['href'] );
   title.push ( data[i]['title'] );
}

href = href.join(",");
title = title.join(",");

Answer 4

The canonical function to make an array based on the contents of another array is map. You can then combine that with join to make the required string:

var hrefs = data.map(function(d) { return "'" + d.href + "'" }).join(', ');
var titles = data.map(function(d) { return "'" d.title + "'" }).join(', ');

Note that this would fail to produce valid CSV if there were any single quote signs inside the fields. A solution would be to supply a more rigorous quoting function. Following the usual convention that a quote inside a string should be doubled-up:

function enquote(v) {
    return "'" + v.replace(/'/g, "''") + "'";
}

with usage:

var titles = data.map(function(d) { return enquote(d.title) }).join(', ');