我有一個 api 回應來回應本機
url_string = "https://example.com/"
//JSON Response
product_images: [
{
"url": "79/79B20211213054555pm1.jpeg"
},
{
"url": "18/18c20211213054555pm2.jpeg"
}
]
現在的事情是我想為每個值附加 url_string，如下所示
//Expected Outcome -
"new_product_images": [
{
"url": "https://example.com/79/79B20211213054555pm1.jpeg"
},
{
"url": "https://example.com/18/18c20211213054555pm2.jpeg"
}
]
我的嘗試
let product_images = [{
"url": "79/79B20211213054555pm1.jpeg"
}, {
"url": "99/79B20211213054555pm1.jpeg"
}];
Object.keys(product_images).forEach(function(key, i) {
product_images[key] = "example/in";
});
console.log(product_images);uj5u.com熱心網友回復：
復制和修改
如果您不復制，您可能會更改原始陣列的 URL 物件
let product_images = [{
"url": "79/79B20211213054555pm1.jpeg"
}, {
"url": "99/79B20211213054555pm1.jpeg"
}];
const prefix = 'https://example.com';
const newImages = JSON.parse(JSON.stringify(product_images)); // deep copy
newImages.forEach(item => item.url = prefix item.url); // modify
console.log(newImages)
console.log(product_images); // not modified更短的地方修改
let product_images = [{
"url": "79/79B20211213054555pm1.jpeg"
}, {
"url": "99/79B20211213054555pm1.jpeg"
}];
const prefix = 'https://example.com';
product_images.forEach(item => item.url = prefix item.url); // modify
console.log(product_images); // now modified當心，這是一個陷阱
這不能按預期作業
let product_images = [{
"url": "79/79B20211213054555pm1.jpeg"
}, {
"url": "99/79B20211213054555pm1.jpeg"
}];
const baseUrl = "https://example.com/",
newImages = product_images
.map(image => (image.url = baseUrl image.url, image));
console.log(newImages)
console.log(product_images); // oops - modified toouj5u.com熱心網友回復：
您可以使用通用功能來做到這一點：
const product_images = [
{
url: '79/79B20211213054555pm1.jpeg',
},
{
url: '18/18c20211213054555pm2.jpeg',
},
];
const concatString = (arr, key, concat) => {
const newArr = arr.map((item) => {
item[key] = concat item[key];
return item;
});
return newArr;
};
console.log(concatString(product_images, 'url', 'https://example.com/'));
console.log(product_images)轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/434384.html
標籤：javascript 反应 反应式 api