javascript - 如何显示此列表结构？角
问题描述
“图片 a”是我从 AJAX 调用中获得的数据。当一个任务的“dependencyTaskId”等于另一个任务的 ID 时，它成为该任务的子任务。如果“dependencyTaskId”为空，则该任务将处于顶层。最终结果将显示所有任务的树结构（“图片 b”）。
我正在使用 Angular 6。我怎样才能做到这一点？请帮我。非常感谢。
"orderId": 879530,
"status": "Processing",
"dateCreated": "2019-11-30T20:47:23.953",
"dateCommitted": "2019-11-30T20:47:25.627",
"dateModified": "2019-11-30T20:47:25.377",
"coreProducts": [
{
"coreProductId": 1597739,
"serviceAddress": {
"addressId": 7506180,
"locationId": "3472036",
"floor": null,
"buildingName": null,
"flatNumber": null,
"streetNumber": "30",
"streetNumberSubDescription": null,
"streetName": "LOGIE",
"streetDirection": null,
"suburb": "STOKES VALLEY",
"city": "LOWER HUTT",
"postCode": "5019",
"freeTextAddressOverride": null,
"attentionTo": null,
"careOf": null,
"addressType": "Service",
"addressAccessInformation": null
},
"coreProductKey": "NGA1000/500",
"contractLength": 12,
"requestedDateOfProvisioning": "2019-12-07T00:00:00",
"installationInstructions": null,
"coreProductComponents": [
{
"coreProductComponentId": 2245296,
"serviceIdentifier": "KoR157510004402",
"service": "Internet",
"ratePlan": "OR_access_NGA1000/500_U_Sep2019",
"overrideCharge": 0,
"electricityPriceOverrides": null
}
],
"coreProductCharges": null
}
],
"additionalProducts": [],
"hardwareOrders": [
{
"hardwareOrderId": 1829471,
"deliveryAddress": {
"addressId": 7506179,
"locationId": "3472036",
"floor": null,
"buildingName": null,
"flatNumber": null,
"streetNumber": "30",
"streetNumberSubDescription": null,
"streetName": "LOGIE",
"streetDirection": null,
"suburb": "STOKES VALLEY",
"city": "LOWER HUTT",
"postCode": "5019",
"freeTextAddressOverride": null,
"attentionTo": null,
"careOf": null,
"addressType": "Courier",
"addressAccessInformation": null
},
"linkedServiceIdentifier": "KoR157510004402",
"contract": null,
"hardwareOrderItems": [
{
"hardwareOrderItemId": 1828173,
"key": "NetCommNF18ACV_FIBRE_OR",
"type": null
}
]
}
],
"account": {
"accountId": 1939814,
"customers": [
{
"customerId": 1935666,
"firstName": "CC1FE844",
"lastName": "D007C",
"middleName": "",
"email": "76FC65F@gmail.com",
"homePhoneNumber": null,
"mobilePhoneNumber": "0212727822",
"workPhoneNumber": null,
"faxNumber": null,
"dateOfBirth": "1956-03-05T00:00:00",
"address": {
"addressId": 7506178,
"locationId": "3472036",
"floor": null,
"buildingName": null,
"flatNumber": null,
"streetNumber": "30",
"streetNumberSubDescription": null,
"streetName": "LOGIE",
"streetDirection": null,
"suburb": "STOKES VALLEY",
"city": "LOWER HUTT",
"postCode": "5019",
"freeTextAddressOverride": null,
"attentionTo": null,
"careOf": null,
"addressType": "PostalPhysical",
"addressAccessInformation": null
}
}
],
"organisationType": null,
"organisationReference": null,
"address": {
"addressId": 7506177,
"locationId": "3472036",
"floor": null,
"buildingName": null,
"flatNumber": null,
"streetNumber": "30",
"streetNumberSubDescription": null,
"streetName": "LOGIE",
"streetDirection": null,
"suburb": "STOKES VALLEY",
"city": "LOWER HUTT",
"postCode": "5019",
"freeTextAddressOverride": null,
"attentionTo": null,
"careOf": null,
"addressType": "PostalPhysical",
"addressAccessInformation": null
}
},
"losingServiceProviders": [
{
"losingServiceProviderId": 677663,
"serviceIdentifier": "KoR157510004402",
"serviceProvider": "ihug",
"accountName": "CEDC5BFE-53EE-4319",
"accountNumber": "20387451"
}
],
"questions": [
{
"questionAnswerId": 6329580,
"question": "LiveThereOrMovingIn",
"answer": "LiveThere",
"serviceIdentifier": "KoR157510004402"
},
{
"questionAnswerId": 6329581,
"question": "WhatServicesCurrentlyHave",
"answer": "BroadbandOnly",
"serviceIdentifier": "KoR157510004402"
}
],
"promoCodes": [
{
"promoCodeId": 2168141,
"promoCode": "GIGANTIC_PROMO",
"serviceIdentifier": "KoR157510004402"
}
],
"tasks": [
{
"taskId": 7670266,
"name": "ChorusGatewayNGAConnectPrimary",
"description": "Creates Chorus Gateway NGA NewConnection ticket",
"displayName": "Chorus Gateway NGA Connect Primary",
"dateStarted": "2019-11-30T20:47:34.617",
"dateCompleted": null,
"dateScheduled": null,
"taskSource": "CoreProducts",
"taskSourceId": "1597739",
"dependencyTaskId": null,
"ticketId": 36503526,
"ticketStatus": "With Provider",
"ticketPercentageComplete": 40,
"externalReferenceId": null,
"hasFailure": false,
"failureReason": "Complete"
},
{
"taskId": 7670268,
"name": "InternetActivation",
"description": "*InternetActivation",
"displayName": "Internet Activation",
"dateStarted": null,
"dateCompleted": null,
"dateScheduled": null,
"taskSource": "CoreProducts",
"taskSourceId": "1597739",
"dependencyTaskId": 7670266,
"ticketId": null,
"ticketStatus": null,
"ticketPercentageComplete": null,
"externalReferenceId": null,
"hasFailure": null,
"failureReason": null
},
{
"taskId": 7670271,
"name": "InternetUsageEvaluation",
"description": "Evaluates if the customer has internet usage",
"displayName": "Internet Usage Evaluation",
"dateStarted": null,
"dateCompleted": null,
"dateScheduled": null,
"taskSource": "CoreProducts",
"taskSourceId": "1597739",
"dependencyTaskId": 7670268,
"ticketId": null,
"ticketStatus": null,
"ticketPercentageComplete": null,
"externalReferenceId": null,
"hasFailure": null,
"failureReason": null
},
{
"taskId": 7670272,
"name": "CustomerCoreProductInsert",
"description": "Store LineNumber/Service data of a CoreProduct to customer tables.",
"displayName": "Customer Core Product Insert",
"dateStarted": null,
"dateCompleted": null,
"dateScheduled": null,
"taskSource": "CoreProducts",
"taskSourceId": "1597739",
"dependencyTaskId": 7670268,
"ticketId": null,
"ticketStatus": null,
"ticketPercentageComplete": null,
"externalReferenceId": null,
"hasFailure": null,
"failureReason": null
},
{
"taskId": 7670273,
"name": "NoUsageComms",
"description": "*NoUsageComms",
"displayName": "No Usage Comms",
"dateStarted": null,
"dateCompleted": null,
"dateScheduled": null,
"taskSource": "CoreProducts",
"taskSourceId": "1597739",
"dependencyTaskId": 7670266,
"ticketId": null,
"ticketStatus": null,
"ticketPercentageComplete": null,
"externalReferenceId": null,
"hasFailure": null,
"failureReason": null
},
{
"taskId": 7670269,
"name": "Hardware",
"description": "*Hardware",
"displayName": "Order Hardware",
"dateStarted": "2019-11-30T20:51:41.22",
"dateCompleted": null,
"dateScheduled": null,
"taskSource": "HardwareOrders",
"taskSourceId": "1828173",
"dependencyTaskId": 7670266,
"ticketId": 36503527,
"ticketStatus": "Scheduled",
"ticketPercentageComplete": 10,
"externalReferenceId": null,
"hasFailure": false,
"failureReason": "Complete"
},
{
"taskId": 7670270,
"name": "PromoCode",
"description": "Promo code task",
"displayName": "Promo Code Task",
"dateStarted": null,
"dateCompleted": null,
"dateScheduled": null,
"taskSource": "PromoCodes",
"taskSourceId": "2168141",
"dependencyTaskId": 7670268,
"ticketId": null,
"ticketStatus": null,
"ticketPercentageComplete": null,
"externalReferenceId": null,
"hasFailure": null,
"failureReason": null
},
{
"taskId": 7670267,
"name": "SaveQuestionsAndAnswers",
"description": "Save Questions And Answers",
"displayName": "Save Questions And Answers",
"dateStarted": "2019-11-30T20:47:33.307",
"dateCompleted": "2019-11-30T20:47:33.307",
"dateScheduled": null,
"taskSource": "SaveQuestionsAndAnswers",
"taskSourceId": "6329580",
"dependencyTaskId": null,
"ticketId": null,
"ticketStatus": null,
"ticketPercentageComplete": null,
"externalReferenceId": null,
"hasFailure": false,
"failureReason": "Complete"
}
],
"fulfilmentItems": []
}
解决方案
您必须通过前端尝试此操作：
const apiResponse = {"orderId": 879530, "status": "Processing", "dateCreated": "2019-11-30T20:47:23.953", "dateCommitted": "2019-11-30T20:47:25.627", "dateModified": "2019-11-30T20:47:25.377", "coreProducts": [ { "coreProductId": 1597739, "serviceAddress": { "addressId": 7506180, "locationId": "3472036", "floor": null, "buildingName": null, "flatNumber": null, "streetNumber": "30", "streetNumberSubDescription": null, "streetName": "LOGIE", "streetDirection": null, "suburb": "STOKES VALLEY", "city": "LOWER HUTT", "postCode": "5019", "freeTextAddressOverride": null, "attentionTo": null, "careOf": null, "addressType": "Service", "addressAccessInformation": null }, "coreProductKey": "NGA1000/500", "contractLength": 12, "requestedDateOfProvisioning": "2019-12-07T00:00:00", "installationInstructions": null, "coreProductComponents": [ { "coreProductComponentId": 2245296, "serviceIdentifier": "KoR157510004402", "service": "Internet", "ratePlan": "OR_access_NGA1000/500_U_Sep2019", "overrideCharge": 0, "electricityPriceOverrides": null } ], "coreProductCharges": null } ], "additionalProducts": [], "hardwareOrders": [ { "hardwareOrderId": 1829471, "deliveryAddress": { "addressId": 7506179, "locationId": "3472036", "floor": null, "buildingName": null, "flatNumber": null, "streetNumber": "30", "streetNumberSubDescription": null, "streetName": "LOGIE", "streetDirection": null, "suburb": "STOKES VALLEY", "city": "LOWER HUTT", "postCode": "5019", "freeTextAddressOverride": null, "attentionTo": null, "careOf": null, "addressType": "Courier", "addressAccessInformation": null }, "linkedServiceIdentifier": "KoR157510004402", "contract": null, "hardwareOrderItems": [ { "hardwareOrderItemId": 1828173, "key": "NetCommNF18ACV_FIBRE_OR", "type": null } ] } ], "account": { "accountId": 1939814, "customers": [ { "customerId": 1935666, "firstName": "CC1FE844", "lastName": "D007C", "middleName": "", "email": "76FC65F@gmail.com", "homePhoneNumber": null, "mobilePhoneNumber": "0212727822", "workPhoneNumber": null, "faxNumber": null, "dateOfBirth": "1956-03-05T00:00:00", "address": { "addressId": 7506178, "locationId": "3472036", "floor": null, "buildingName": null, "flatNumber": null, "streetNumber": "30", "streetNumberSubDescription": null, "streetName": "LOGIE", "streetDirection": null, "suburb": "STOKES VALLEY", "city": "LOWER HUTT", "postCode": "5019", "freeTextAddressOverride": null, "attentionTo": null, "careOf": null, "addressType": "PostalPhysical", "addressAccessInformation": null } } ], "organisationType": null, "organisationReference": null, "address": { "addressId": 7506177, "locationId": "3472036", "floor": null, "buildingName": null, "flatNumber": null, "streetNumber": "30", "streetNumberSubDescription": null, "streetName": "LOGIE", "streetDirection": null, "suburb": "STOKES VALLEY", "city": "LOWER HUTT", "postCode": "5019", "freeTextAddressOverride": null, "attentionTo": null, "careOf": null, "addressType": "PostalPhysical", "addressAccessInformation": null } }, "losingServiceProviders": [ { "losingServiceProviderId": 677663, "serviceIdentifier": "KoR157510004402", "serviceProvider": "ihug", "accountName": "CEDC5BFE-53EE-4319", "accountNumber": "20387451" } ], "questions": [ { "questionAnswerId": 6329580, "question": "LiveThereOrMovingIn", "answer": "LiveThere", "serviceIdentifier": "KoR157510004402" }, { "questionAnswerId": 6329581, "question": "WhatServicesCurrentlyHave", "answer": "BroadbandOnly", "serviceIdentifier": "KoR157510004402" } ], "promoCodes": [ { "promoCodeId": 2168141, "promoCode": "GIGANTIC_PROMO", "serviceIdentifier": "KoR157510004402" } ], "tasks": [ { "taskId": 7670266, "name": "ChorusGatewayNGAConnectPrimary", "description": "Creates Chorus Gateway NGA NewConnection ticket", "displayName": "Chorus Gateway NGA Connect Primary", "dateStarted": "2019-11-30T20:47:34.617", "dateCompleted": null, "dateScheduled": null, "taskSource": "CoreProducts", "taskSourceId": "1597739", "dependencyTaskId": null, "ticketId": 36503526, "ticketStatus": "With Provider", "ticketPercentageComplete": 40, "externalReferenceId": null, "hasFailure": false, "failureReason": "Complete" }, { "taskId": 7670268, "name": "InternetActivation", "description": "*InternetActivation", "displayName": "Internet Activation", "dateStarted": null, "dateCompleted": null, "dateScheduled": null, "taskSource": "CoreProducts", "taskSourceId": "1597739", "dependencyTaskId": 7670266, "ticketId": null, "ticketStatus": null, "ticketPercentageComplete": null, "externalReferenceId": null, "hasFailure": null, "failureReason": null }, { "taskId": 7670271, "name": "InternetUsageEvaluation", "description": "Evaluates if the customer has internet usage", "displayName": "Internet Usage Evaluation", "dateStarted": null, "dateCompleted": null, "dateScheduled": null, "taskSource": "CoreProducts", "taskSourceId": "1597739", "dependencyTaskId": 7670268, "ticketId": null, "ticketStatus": null, "ticketPercentageComplete": null, "externalReferenceId": null, "hasFailure": null, "failureReason": null }, { "taskId": 7670272, "name": "CustomerCoreProductInsert", "description": "Store LineNumber/Service data of a CoreProduct to customer tables.", "displayName": "Customer Core Product Insert", "dateStarted": null, "dateCompleted": null, "dateScheduled": null, "taskSource": "CoreProducts", "taskSourceId": "1597739", "dependencyTaskId": 7670268, "ticketId": null, "ticketStatus": null, "ticketPercentageComplete": null, "externalReferenceId": null, "hasFailure": null, "failureReason": null }, { "taskId": 7670273, "name": "NoUsageComms", "description": "*NoUsageComms", "displayName": "No Usage Comms", "dateStarted": null, "dateCompleted": null, "dateScheduled": null, "taskSource": "CoreProducts", "taskSourceId": "1597739", "dependencyTaskId": 7670266, "ticketId": null, "ticketStatus": null, "ticketPercentageComplete": null, "externalReferenceId": null, "hasFailure": null, "failureReason": null }, { "taskId": 7670269, "name": "Hardware", "description": "*Hardware", "displayName": "Order Hardware", "dateStarted": "2019-11-30T20:51:41.22", "dateCompleted": null, "dateScheduled": null, "taskSource": "HardwareOrders", "taskSourceId": "1828173", "dependencyTaskId": 7670266, "ticketId": 36503527, "ticketStatus": "Scheduled", "ticketPercentageComplete": 10, "externalReferenceId": null, "hasFailure": false, "failureReason": "Complete" }, { "taskId": 7670270, "name": "PromoCode", "description": "Promo code task", "displayName": "Promo Code Task", "dateStarted": null, "dateCompleted": null, "dateScheduled": null, "taskSource": "PromoCodes", "taskSourceId": "2168141", "dependencyTaskId": 7670268, "ticketId": null, "ticketStatus": null, "ticketPercentageComplete": null, "externalReferenceId": null, "hasFailure": null, "failureReason": null }, { "taskId": 7670267, "name": "SaveQuestionsAndAnswers", "description": "Save Questions And Answers", "displayName": "Save Questions And Answers", "dateStarted": "2019-11-30T20:47:33.307", "dateCompleted": "2019-11-30T20:47:33.307", "dateScheduled": null, "taskSource": "SaveQuestionsAndAnswers", "taskSourceId": "6329580", "dependencyTaskId": null, "ticketId": null, "ticketStatus": null, "ticketPercentageComplete": null, "externalReferenceId": null, "hasFailure": false, "failureReason": "Complete" } ], "fulfilmentItems": [] }
const nestedChild = (inputArray, parentKeyName, childKeyName, relationKeyValue = null) => {
const tree = []
for(let i in inputArray) {
if(inputArray[i][childKeyName] == relationKeyValue) {
let children = nestedChild(inputArray, parentKeyName, childKeyName, inputArray[i][parentKeyName])
if(children.length) {
inputArray[i].children = children
}
tree.push(inputArray[i])
}
}
return tree
}
apiResponse.tasks = nestedChild(
apiResponse.tasks,
'taskId',
'dependencyTaskId',
null
);
console.log(apiResponse);
输出：
现在你可以在无序列表中遍历和打印它，并且可以通过 css 对其进行格式化。
希望这对您有很大帮助。
推荐阅读
- python - 澄清 tf.Session() 作用域 TensorFlow
- javascript - 编写一个函数来打印总和，它接受这个 wa 中的参数： sum(2)(3) 并输出 5
- c# - 通过 UWP 应用中的框架返回导航
- sql-server - Docker 容器错误：TDSSNIClient 初始化失败，错误为 0xffffffff，状态码 0x80。原因：无法初始化 SSL 支持
- javascript - 如何解释以下 javascript 代码段结果？
- python - 用于自动化 Windows 应用程序的工具（最好在 Python 中）？
- javascript - 直接使用render和通过cell属性渲染React table的行元素有什么区别
- c# - C# 以具有管理员权限的不同用户身份启动进程
- python - Python 3.x 短内存数猜测（编程/数学）
- sql - Oracle SQL 中的字符集不匹配