賞金將在 6 天后到期。此問題的答案有資格獲得 100聲望賞金。 Aakash正在從有信譽的來源尋找答案。
let data = [{
system: {
id: "4gSSbjCFEorYXqrgDIP2FA",
type: "Entry",
name: "User"
},
DataDetails: {
shortOption: {
"en-us": "some value"
},
mediaFile: [{
sys: {
type: "Link",
link: "Entry",
id: "7kRzyt4PFo",
},
},
{
sys: {
type: "Link",
link: "Entry",
id: "2OspeCtNK0s",
},
},
],
mediaGalary: [{
sys: {
type: "Link",
link: "Asset",
id: "gHcw3Z1Ko",
},
},
{
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
],
mediaExplore: [{
sys: {
type: "Link",
link: "Asset",
id: "euwcbds3282",
},
},
{
sys: {
type: "Link",
linkType: "Asset",
id: "jndsiw23912",
},
},
],
singleMediaImage: {
sys: {
type: "Link",
linkType: "Asset",
id: "7kRzyt4PFo",
},
},
},
},
{
system: {
id: "1aBOO8tu3lUsjtICuIbUM5",
type: "Entry",
name: "User"
},
DataDetails: {
short: {
"en-us": "details of shorts"
},
shortSlugOption: {
"hi-In": "options"
},
booleanField: {
kl: "true"
},
},
},
{
system: {
id: "2pOUGnI1oRD7nsrYs600HA",
type: "Entry",
name: "Dummy"
},
DataDetails: {
testingNewValue: [{
sys: {
type: "Link",
link: "Entry",
id: "66rzYr2BpWL",
},
},
{
sys: {
type: "Link",
link: "Entry",
id: "1VTBHdLTdSW",
},
},
],
},
},
{
system: {
id: "66rzYr2BpWL1VTBHdLTdSW",
type: "Entry",
name: "new"
},
DataDetails: {
oneReference: {
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
multiReference: [{
sys: {
type: "Link",
link: "Asset",
id: "gHcw3Z1Ko",
},
},
{
sys: {
type: "Link",
link: "Asset",
id: "h2cPiuU9jIz",
},
},
],
},
},
{
system: {
id: "cIb5mqEBRWDD6hrNmFmFE",
type: "Entry",
name: "new"
},
DataDetails: {
testingNewValue: {
"hi-IN": "jksdsdo"
}
},
},
{
system: {
id: "7kRzyt4PFrX13gHcw3Z1Ko",
type: "Entry",
name: "Dummy"
},
DataDetails: {
testingNewValue: {
"en-us": "kknksdo"
}
},
},
];
let anotherObj = {
"gHcw3Z1Ko": {
status: true,
tag: [],
filename: "exute-image.jpg",
is_dir: false,
parent_uid: null,
},
"h2cPiuU9jIz": {
status: true,
tag: [],
filename: "wallpapers-6.jpg",
is_dir: false,
parent_uid: null,
},
"7kRzyt4PFo": {
status: true,
tag: [],
filename: "in-space-rk.jpg",
is_dir: false,
parent_uid: null,
},
"euwcbds3282": {
status: true,
tag: [],
filename: "justice-league.jpg",
is_dir: false,
parent_uid: null,
},
"jndsiw23912": {
status: true,
tag: [],
filename: "batman.jpg",
is_dir: false,
parent_uid: null,
},
};
let res = data.reduce((acc, curr) => {
if (!acc[curr.system.name]) {
acc[curr.system.name] = {};
}
let detailsObj = {};
let assetArray=[];
for (let key of Object.keys(curr.DataDetails)) {
detailsObj[key] = Object.values(curr.DataDetails[key])[0];
if (typeof Object.values(curr.DataDetails[key])[0] === "object") {
Object.values(curr.DataDetails[key]).map((type) => {
if (Array.isArray(type)) {
type.map((link) => {
if (link.sys.link === "Asset") {
for (let id in anotherObj) {
if (link.sys.id === id) {
assetArray.push(anotherObj[id]);
detailsObj[key] = assetArray;
}
}
}
});
} else {
if (type.sys !== undefined) {
// for single Asset
if (type.sys.link === "Asset") {
for (let id in anotherObj) {
if (type.sys.id === id) {
detailsObj[key] = [anotherObj[id]];
}
}
}
}
}
});
}
}
acc[curr.system.name][curr.system.id] = {
title: curr.system.id,
uid: curr.system.id,
url: `/${curr.system.name}/${curr.system.id}`,
...detailsObj,
};
return acc;
}, {});
console.log(res);
我正在嘗試將兩個物件資料放在一個輸出中,但是通過讀取 Asset 的鏈接
但在多個陣列串列中,輸出顯示為單個資產輸出,mediaFile包含兩個條目,但我不知道我在哪里做錯了,它向我顯示了一個值
因為我的主要目的是用sys:{id:erfrdvsdf}anotherObj 關鍵資料替換
所以它應該看起來像這樣,例如我的輸出是這樣的
"User": {
"4gSSbjCFEorYXqrgDIP2FA": {
"title": "4gSSbjCFEorYXqrgDIP2FA",
"uid": "4gSSbjCFEorYXqrgDIP2FA",
"url": "/User/4gSSbjCFEorYXqrgDIP2FA",
"shortOption": "some value",
"mediaFile": {
"sys": {
"type": "Link",
"link": "Entry",
"id": "7kRzyt4PFo"
}
},
"mediaGalary": [
{
/**id:7**/
"status": true,
"tag": [],
"filename": "in-space-rk.jpg",
"is_dir": false,
"parent_uid": null
}
],
"singleMediaImage": {
"type": "Link",
"linkType": "Asset",
"id": "h2cPiuU9jIz"
}
},
},
但它應該像這樣
"User": {
"4gSSbjCFEorYXqrgDIP2FA": {
"title": "4gSSbjCFEorYXqrgDIP2FA",
"uid": "4gSSbjCFEorYXqrgDIP2FA",
"url": "/User/4gSSbjCFEorYXqrgDIP2FA",
"shortOption": "some value",
"mediaFile": {
"sys": {
"type": "Link",
"link": "Entry",
"id": "7kRzyt4PFo"
}
},
"mediaGalary": [
{
"status": true,
"tag": [],
"filename": "in-space-rk.jpg",
"is_dir": false,
"parent_uid": null
},
{
"status": true,
"tag": [],
"filename": "wallpapers-6.jpg",
"is_dir": false,
"parent_uid": null
},
],
"mediaExplore": [
{
"status": true,
"tag": [],
"filename": "justice-league",
"is_dir": false,
"parent_uid": null
},
{
"status": true,
"tag": [],
"filename": "batman.jpg",
"is_dir": false,
"parent_uid": null
},
],
"singleMediaImage": [
{
"status": true,
"tag": [],
"filename": "wallpapers-6.jpg",
"is_dir": false,
"parent_uid": null
},
]
},
},
但我的預期輸出是我所期待的
由于這個原因,我被輸入欄位卡住了,因為我在輸入欄位中遇到了同樣的問題,因為我撰寫了相同的代碼來獲取陣列中的輸入欄位和單個輸入欄位
我的代碼在哪里我不知道
我知道這是很長的代碼,但請幫我解決這個錯誤,因為我沒有繼續前進
uj5u.com熱心網友回復:
如果你手動遍歷復雜的物件,事情會變得非常復雜。維護代碼將是一場噩夢。有很好的開源庫可用于使用簡單查詢遍歷復雜物件。例如,JsonPath。
在下面的演示中,我使用了 JsonPath。它處理Asset以及Entry沒有任何特殊處理。對于演示,我提供了所有 id 的替換。
let data = getData();
let anotherObj = getAnotherObj();
let res = data.reduce((acc, curr) => {
if (!acc[curr.system.name]) {
acc[curr.system.name] = {};
}
let detailsObj = {};
Object.keys(curr.DataDetails).forEach(key => {
let values = curr.DataDetails[key];
// special handling to flatten single attribute objects
if (values.length === undefined || values.length === 0) {
let keys = Object.keys(values);
if (keys.length == 1 && typeof values[keys[0]] !== 'object') {
detailsObj[key] = values[keys[0]];
return;
}
}
// clone values to output
detailsObj[key] = !Array.isArray(values) ? Object.assign({}, values) : [...values];
// find and replace ids
let ids = jsonpath.query(detailsObj[key], '$..id');
ids.forEach((id, i) => {
if (id in anotherObj) {
if (Array.isArray(detailsObj[key]))
detailsObj[key].splice(i, 1, anotherObj[id]);
else
detailsObj[key] = anotherObj[id];
}
});
});
acc[curr.system.name][curr.system.id] = {
title: curr.system.id,
uid: curr.system.id,
url: `/${curr.system.name}/${curr.system.id}`,
...detailsObj,
};
return acc;
}, {});
document.body.insertAdjacentHTML('beforeend', `<pre>${JSON.stringify(res, undefined, 1)}</pre>`);
console.log(res);
function getData() {
return [{
system: {
id: "4gSSbjCFEorYXqrgDIP2FA",
type: "Entry",
name: "User"
},
DataDetails: {
shortOption: {
"en-us": "some value"
},
mediaFile: [{
sys: {
type: "Link",
link: "Entry",
id: "7kRzyt4PFo",
},
},
{
sys: {
type: "Link",
link: "Entry",
id: "2OspeCtNK0s",
},
},
],
mediaGalary: [{
sys: {
type: "Link",
link: "Asset",
id: "gHcw3Z1Ko",
},
},
{
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
],
singleMediaImage: {
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
},
},
{
system: {
id: "1aBOO8tu3lUsjtICuIbUM5",
type: "Entry",
name: "User"
},
DataDetails: {
short: {
"en-us": "details of shorts"
},
shortSlugOption: {
"hi-In": "options"
},
booleanField: {
kl: "true"
},
},
},
{
system: {
id: "2pOUGnI1oRD7nsrYs600HA",
type: "Entry",
name: "Dummy"
},
DataDetails: {
testingNewValue: [{
sys: {
type: "Link",
link: "Entry",
id: "66rzYr2BpWL",
},
},
{
sys: {
type: "Link",
link: "Entry",
id: "1VTBHdLTdSW",
},
},
],
},
},
{
system: {
id: "66rzYr2BpWL1VTBHdLTdSW",
type: "Entry",
name: "new"
},
DataDetails: {
oneReference: {
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
multiReference: [{
sys: {
type: "Link",
link: "Asset",
id: "gHcw3Z1Ko",
},
},
{
sys: {
type: "Link",
link: "Asset",
id: "h2cPiuU9jIz",
},
},
],
},
},
{
system: {
id: "cIb5mqEBRWDD6hrNmFmFE",
type: "Entry",
name: "new"
},
DataDetails: {
testingNewValue: {
"hi-IN": "jksdsdo"
}
},
},
{
system: {
id: "7kRzyt4PFrX13gHcw3Z1Ko",
type: "Entry",
name: "Dummy"
},
DataDetails: {
testingNewValue: {
"en-us": "kknksdo"
}
},
}
];
}
function getAnotherObj() {
return {
"h2cPiuU9jIz": {
status: true,
tag: [],
filename: "wallpapers-6.jpg",
is_dir: false,
parent_uid: null,
},
"gHcw3Z1Ko": {
status: true,
tag: [],
filename: "in-space-rk.jpg",
is_dir: false,
parent_uid: null,
},
"7kRzyt4PFo": {
status: true,
tag: [],
filename: "mediaFile0.jpg",
is_dir: false,
parent_uid: null,
},
"2OspeCtNK0s": {
status: true,
tag: [],
filename: "mediaFile1.jpg",
is_dir: false,
parent_uid: null,
},
"66rzYr2BpWL": {
type: 'entry',
tag: [],
entry_details: "this is first entry ***",
is_secret: false,
},
"1VTBHdLTdSW": {
type: 'entry',
tag: [],
entry_details: "some other entry ***",
is_secret: true,
},
};
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jsonpath.min.js"></script>
注意,我沒有處理 case "shortOption": "some value"。無論如何,展平單值物件并不是這里的重點。
或者您可以用單個陳述句替換原始物件中的所有資產和條目!
let data = getData();
let anotherObj = getAnotherObj();
jsonpath.apply(data, '$[*].DataDetails..[?(@.sys.id)]', e => anotherObj[e.sys.id]);
document.body.insertAdjacentHTML('beforeend', `<pre>${JSON.stringify(data, undefined, 1)}</pre>`);
console.log(data);
function getData() {
return [{
system: {
id: "4gSSbjCFEorYXqrgDIP2FA",
type: "Entry",
name: "User"
},
DataDetails: {
shortOption: {
"en-us": "some value"
},
mediaFile: [{
sys: {
type: "Link",
link: "Entry",
id: "7kRzyt4PFo",
},
},
{
sys: {
type: "Link",
link: "Entry",
id: "2OspeCtNK0s",
},
},
],
mediaGalary: [{
sys: {
type: "Link",
link: "Asset",
id: "gHcw3Z1Ko",
},
},
{
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
],
singleMediaImage: {
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
},
},
{
system: {
id: "1aBOO8tu3lUsjtICuIbUM5",
type: "Entry",
name: "User"
},
DataDetails: {
short: {
"en-us": "details of shorts"
},
shortSlugOption: {
"hi-In": "options"
},
booleanField: {
kl: "true"
},
},
},
{
system: {
id: "2pOUGnI1oRD7nsrYs600HA",
type: "Entry",
name: "Dummy"
},
DataDetails: {
testingNewValue: [{
sys: {
type: "Link",
link: "Entry",
id: "66rzYr2BpWL",
},
},
{
sys: {
type: "Link",
link: "Entry",
id: "1VTBHdLTdSW",
},
},
],
},
},
{
system: {
id: "66rzYr2BpWL1VTBHdLTdSW",
type: "Entry",
name: "new"
},
DataDetails: {
oneReference: {
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
multiReference: [{
sys: {
type: "Link",
link: "Asset",
id: "gHcw3Z1Ko",
},
},
{
sys: {
type: "Link",
link: "Asset",
id: "h2cPiuU9jIz",
},
},
],
},
},
{
system: {
id: "cIb5mqEBRWDD6hrNmFmFE",
type: "Entry",
name: "new"
},
DataDetails: {
testingNewValue: {
"hi-IN": "jksdsdo"
}
},
},
{
system: {
id: "7kRzyt4PFrX13gHcw3Z1Ko",
type: "Entry",
name: "Dummy"
},
DataDetails: {
testingNewValue: {
"en-us": "kknksdo"
}
},
}
];
}
function getAnotherObj() {
return {
"h2cPiuU9jIz": {
status: true,
tag: [],
filename: "wallpapers-6.jpg",
is_dir: false,
parent_uid: null,
},
"gHcw3Z1Ko": {
status: true,
tag: [],
filename: "in-space-rk.jpg",
is_dir: false,
parent_uid: null,
},
"7kRzyt4PFo": {
status: true,
tag: [],
filename: "mediaFile0.jpg",
is_dir: false,
parent_uid: null,
},
"2OspeCtNK0s": {
status: true,
tag: [],
filename: "mediaFile1.jpg",
is_dir: false,
parent_uid: null,
},
"66rzYr2BpWL": {
type: 'entry',
tag: [],
entry_details: "this is first entry ****",
is_secret: false,
},
"1VTBHdLTdSW": {
type: 'entry',
tag: [],
entry_details: "some other entry ****",
is_secret: true,
},
};
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jsonpath.min.js"></script>
uj5u.com熱心網友回復:
您缺少一些值,因為您不檢查linkType. 您的回圈正在檢查sys.link但不檢查sys.linkType.
采用:
link.sys.link === 'Asset' || link.sys.linkType === 'Asset'
和
type.sys.link === 'Asset' || type.sys.linkType === 'Asset'
此行也將覆寫您的陣列:detailsObj[key] = [anotherObj[id]];
將其替換為:
assetArray.push(anotherObj[id]);
detailsObj[key] = assetArray;
需要明確的是,這段代碼不好。幾點建議:
- 將代碼拆分為更小的邏輯單元。不要嵌套 5 級回圈。制作執行小操作的函式并相應地命名它們(例如,代替 do
for (let id in anotherObj) { ... },將邏輯放在名為 的函式中findAssetData) Array.prototype.forEach理解和的區別Array.prototype.map(這段代碼中的map使用是錯誤的)- 使用 eslint 之類的代碼質量工具,如果你是初學者,它會有所幫助
uj5u.com熱心網友回復:
您的代碼中有一個錯誤:anotherObj有重復的鍵。如果您將其注銷,您將看到該物件中只有兩個條目:
let anotherObj = {
gHcw3Z1Ko: {
status: true,
tag: [],
filename: "exute-image.jpg",
is_dir: false,
parent_uid: null,
},
h2cPiuU9jIz: {
status: true,
tag: [],
filename: "wallpapers-6.jpg",
is_dir: false,
parent_uid: null,
},
gHcw3Z1Ko: {
status: true,
tag: [],
filename: "in-space-rk.jpg",
is_dir: false,
parent_uid: null,
},
};
console.log(anotherObj)
此外,將mediaFile條目陣列壓縮為一個 - 你沒有描述你想用它做什么,所以我假設陣列中的第一個專案就足夠了。
但這可能不是您所追求的(在以下代碼段中,我洗掉了重復鍵的第一個條目):
let data = [{
system: {
id: "4gSSbjCFEorYXqrgDIP2FA",
type: "Entry",
name: "User"
},
DataDetails: {
shortOption: {
"en-us": "some value"
},
mediaFile: [{
sys: {
type: "Link",
link: "Entry",
id: "7kRzyt4PFo",
},
},
{
sys: {
type: "Link",
link: "Entry",
id: "2OspeCtNK0s",
},
},
],
mediaGalary: [{
sys: {
type: "Link",
link: "Asset",
id: "gHcw3Z1Ko",
},
},
{
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
],
singleMediaImage: {
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
},
},
{
system: {
id: "1aBOO8tu3lUsjtICuIbUM5",
type: "Entry",
name: "User"
},
DataDetails: {
short: {
"en-us": "details of shorts"
},
shortSlugOption: {
"hi-In": "options"
},
booleanField: {
kl: "true"
},
},
},
{
system: {
id: "2pOUGnI1oRD7nsrYs600HA",
type: "Entry",
name: "Dummy"
},
DataDetails: {
testingNewValue: [{
sys: {
type: "Link",
link: "Entry",
id: "66rzYr2BpWL",
},
},
{
sys: {
type: "Link",
link: "Entry",
id: "1VTBHdLTdSW",
},
},
],
},
},
{
system: {
id: "66rzYr2BpWL1VTBHdLTdSW",
type: "Entry",
name: "new"
},
DataDetails: {
oneReference: {
sys: {
type: "Link",
linkType: "Asset",
id: "h2cPiuU9jIz",
},
},
multiReference: [{
sys: {
type: "Link",
link: "Asset",
id: "gHcw3Z1Ko",
},
},
{
sys: {
type: "Link",
link: "Asset",
id: "h2cPiuU9jIz",
},
},
],
},
},
{
system: {
id: "cIb5mqEBRWDD6hrNmFmFE",
type: "Entry",
name: "new"
},
DataDetails: {
testingNewValue: {
"hi-IN": "jksdsdo"
}
},
},
{
system: {
id: "7kRzyt4PFrX13gHcw3Z1Ko",
type: "Entry",
name: "Dummy"
},
DataDetails: {
testingNewValue: {
"en-us": "kknksdo"
}
},
},
];
let anotherObj = {
h2cPiuU9jIz: {
status: true,
tag: [],
filename: "wallpapers-6.jpg",
is_dir: false,
parent_uid: null,
},
gHcw3Z1Ko: {
status: true,
tag: [],
filename: "in-space-rk.jpg",
is_dir: false,
parent_uid: null,
},
};
// this is the function that actually merges the source
// object with anotherObj
const mergeGallery = (src, other) => {
return src.reduce((a, c) => {
if (typeof a[c.sys.id] === "undefined") a[c.sys.id] = {}
a[c.sys.id] = { ...other[c.sys.id] }
return a
}, {})
}
// just to display that the generation of conditional attributes
// can be extracted to their own functions
const getShortOption = (el) => {
const shortOption = el.system.name === "User" && el.DataDetails && el.DataDetails.shortOption ? {
shortOption: el.DataDetails.shortOption["en-us"]
} : {}
return shortOption
}
const getFormatted = (el, otherGallery) => {
return {
title: el.system.id,
uid: el.system.id,
url: `/${el.system.name}/${el.system.id}`,
...getShortOption(el),
...(el.DataDetails && el.DataDetails.mediaFile && {
mediaFile: el.DataDetails.mediaFile[0]
}),
...(el.DataDetails && el.DataDetails.mediaGalary && {
mediaGalary: mergeGallery(el.DataDetails.mediaGalary, otherGallery)
}),
...(el.DataDetails && el.DataDetails.singleMediaImage && {
singleMediaImage: el.DataDetails.singleMediaImage.sys
}),
}
}
const categorizeItems = (data) => {
return data.reduce((a, c) => {
if (typeof a[c.system.name] === "undefined") a[c.system.name] = {}
a[c.system.name][c.system.id] = getFormatted(c, anotherObj)
return a
}, {})
}
const ret = categorizeItems(data)
console.log(ret)
建議
- 條件可以短得多:
const getShortOption = (el) => {
const shortOption =
el.system.name === "User" && el.DataDetails && el.DataDetails.shortOption
? { shortOption: el.DataDetails.shortOption["en-us"], }
: {};
return shortOption;
};
// could be written as
const getShortOption = (el) => {
const shortOption = el.system.name === "User" && el.DataDetails?.shortOption?.["en-us"]
? { shortOption: el.DataDetails.shortOption["en-us"] }
: {}
return shortOption
}
如果您使用?.鏈接,所有條件都更短 - 不幸的是,SO 片段不知道這種語法。
- 如果您在代碼中使用英文術語,請更正
Galaryto的拼寫Gallery。如果你不這樣做,這將是一個很好的混亂來源。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/429412.html
標籤:javascript 节点.js 数组 if 语句 节点
上一篇:函式沒有回傳任何值
