如何在Javascript

Question

我在下面的数组中有图像参数，我需要使用。

构建一个新的URL

[
  {

    "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"

  }]

所以从这个数组我想为每个图像创建一个唯一的url并将它们推送到一个新的数组 - imageUrls。 我的新阵列应该是这样的。

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

]

这是我到目前为止所做的。

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

这有两个问题。这是我在console.log时使用urlParameters数组的内容。我无法获得每个值的密钥。

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

我的urls数组是空的。 我试试这里没有运气：

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

Answer 1

编辑动态参数：

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

Answer 2

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

Answer 3

以下是否适合您：

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

Answer 4

您可以使用Array.prototype.map()，对象解构，Array.prototype.pop()

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，您可以使用.map()，Object.entries()，Array.prototype.reduce()来连接对象的静态或动态属性的N值，而无需引用特定的属性名称来获取值

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第二种方法不使用对象解构，箭头函数，模板文字

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

Answer 5

我希望这会有所帮助！

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