2017-02-21 41 views
0

我有一个数组下的图像参数,我需要构建一个新的URL。如何连接在Javascript中的数组值

[ 
    { 

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

回答

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

为您做了以下工作:

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

1

编辑的动态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 
    })) 
} 
+0

params可以改变。图像数组是动态创建的。 –

0

您可以使用Array.prototype.map(),对象解构,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);

或者,你可以使用.map()Object.entries()Array.prototype.reduce()来连接对象的静态或动态属性N价值,没有引用特定属性名称来获取价值。

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

不使用对象解构,箭头功能,模板文字

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

我希望第二个方法这有助于出去!

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