How to concatenate the array values in Javascript

Question

I have image parameters in an array below that I need to construct a new URL with.

[
  {

    "image-name": "Name of the image",
    "imageURLParameters": [
      {
        "param1": "image1parameter1",
        "param2": "image1parameter2",
        "param3": "image1parameter3"
      }
    ],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [
      {
        "param1": "image2parameter1",
        "param2": "image2parameter2",
        "param3": "image2parameter3"
      }
    ],
   "imageDescription": "another cool image"

  }]

So from this array I would like to create a unique url per image and push them to a new array - imageUrls. My new array should look like this.

[ {url:localhost&image1parameter1&image1parameter2&image1parameter3 },
 {url:localhost&image2parameter1&image2parameter2&image2parameter3}

]

This is what I have so far.

var urlParameters = [{
        param1:"",
        param2: "",
        param3: ""}];
    var imageUrls = [];
images.imageURLParameters.forEach(function (image) {

 var param1 = image.param1;
            var param2 = image.param2;
            var param3 = image.param3;
urlParameters.push(param1,  param2,  param3);

}

function imageURLMaker(){
    urlParameters.forEach(function (url){
        var mainUrl = "localhost"
            + "&param1="     + url.param1;
            + "&param2="    + url.param2;
            + "&param3="    + url.param3;
        urls.push(mainUrl);
    });
}

Two problems with this. This is what I have with the urlParameters array when console.log. I cannot get key per each value.

[{image1parameter1.image1parameter2.image1parameter3,image2parameter1.image2parameter2.image2parameter3}]

And my urls array is empty. I tried this here with no luck:

urlParameters.push(urlParameters.param1, urlParameters.param2, urlParameters.param3);

Rick Lee · Accepted Answer · 2017-02-21 05:19:07Z

1

Edited for dynamic params:

function b(arr) {

    return (arr.map(img => {
        let url = "localhost"

        for (let k in img.imageURLParameters[0]) {
            url += `&${k}=${img.imageURLParameters[0][k]}`
        }
        return url
    }))
}

edited Feb 21, 2017 at 5:19

answered Feb 21, 2017 at 4:27

Rick Lee

7732 gold badges9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gokhan Dilek Over a year ago

params can change. The image array is created dynamically.

Venugopal · Accepted Answer · 2017-02-21 04:26:52Z

var images = [
  {

    "image-name": "Name of the image",
    "imageURLParameters": [
      {
        "param1": "image1parameter1",
        "param2": "image1parameter2",
        "param3": "image1parameter3"
      }
    ],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [
      {
        "param1": "image2parameter1",
        "param2": "image2parameter2",
        "param3": "image2parameter3"
      }
    ],
   "imageDescription": "another cool image"

  }];
var urls = [];    
images.forEach(function(image) {
    image.imageURLParameters.forEach(function(params) {
    var url = 'localhost';
    for(var key in params) {
        url += '&'+key+'='+params[key]
    }
    urls.push(url);
  });
});
console.log(urls);

uautkarsh · Accepted Answer · 2017-02-21 04:32:22Z

Does the following work for you:

images = [
  {

    "image-name": "Name of the image",
    "imageURLParameters": [
      {
        "param1": "image1parameter1",
        "param2": "image1parameter2",
        "param3": "image1parameter3"
      }
    ],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [
      {
        "param1": "image2parameter1",
        "param2": "image2parameter2",
        "param3": "image2parameter3"
      }
    ],
   "imageDescription": "another cool image"

  }];
  
function imageURLMaker(urlData){
  var mainUrl = "localhost";
  for(var key in urlData) {
    mainUrl += "&" + key + "=" + urlData[key];
  }
  return mainUrl;
}

imageUrlArray = [];

images.forEach(function(imageData) {
  var mainUrl = imageURLMaker(imageData.imageURLParameters[0]);
  imageUrlArray.push({ "url": mainUrl });
})
console.log(imageUrlArray);

Matt Fernandez · Accepted Answer · 2017-02-21 04:44:51Z

0

I hope this helps out!

const urlMaker = x
  .map(v => v.imageURLParameters
  .map(value => 
  `{url:localhost&${value.param1}&${value.param2}&${value.param3}}`
  )
)
urlMaker.reduce((a, b) => a.concat(b));

answered Feb 21, 2017 at 4:44

Matt Fernandez

1886 bronze badges

Comments

guest271314 · Accepted Answer · 2017-02-21 06:06:51Z

You can use Array.prototype.map(), object destructuring, Array.prototype.pop()

let data = [{

    "image-name": "Name of the image",
    "imageURLParameters": [{
      "param1": "image1parameter1",
      "param2": "image1parameter2",
      "param3": "image1parameter3"
    }],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [{
      "param1": "image2parameter1",
      "param2": "image2parameter2",
      "param3": "image2parameter3"
    }],
    "imageDescription": "another cool image"

  }
];

let urls = data.map(({imageURLParameters}) =>
  imageURLParameters.map(({param1, param2, param3}) =>
    ({url: `localhost&${param1}&${param2}&${param3}`})).pop()
);

console.log(urls);

Alternatively, you can use .map(), Object.entries(), Array.prototype.reduce() to concatenate N value of static or dynamic property of object, without referencing a specific property name to get value.

let data = [{

    "image-name": "Name of the image",
    "imageURLParameters": [{
      "param1": "image1parameter1",
      "param2": "image1parameter2",
      "param3": "image1parameter3"
    }],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [{
      "param1": "image2parameter1",
      "param2": "image2parameter2",
      "param3": "image2parameter3"
    }],
    "imageDescription": "another cool image"

  }
];

let urls = data.map(({imageURLParameters}) => 
 ({url:Object.entries(imageURLParameters[0]).reduce((prop, [, value]) => 
   `${prop}&${value}`, "localhost")
 })
);

console.log(urls);

The second approach without using object destructuring, arrow function, template literal

let urls = data.map(function(o) {
             return {url: Object.entries(o.imageURLParameters[0])
                          .reduce(function(prop, value) {
                            return prop + "&" + value[1]
                          }, "localhost")
             }
           });

Collectives™ on Stack Overflow

How to concatenate the array values in Javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related