javascript - 如何在 JS 对象中组合嵌套数组中的值?
问题描述
我有一个嵌套的 JS 对象:
var object = {"person":{
"id": "d54c54ad-40be-4305-8a34-0ab44710b90d",
"name": {
"fullName": "Alex MacCaw",
"givenName": "Alex",
"familyName": "MacCaw"
},
"email": "alex@alexmaccaw.com",
"location": "San Francisco, CA, US",
"timeZone": "America/Los_Angeles",
"utcOffset": -8,
"geo": {
"city": "San Francisco",
"state": "California",
"stateCode": "CA",
"country": "United States",
"countryCode": "US",
"lat": 37.7749295,
"lng": -122.4194155
},
"bio": "O'Reilly author, software engineer & traveller. Founder of https://clearbit.com",
"site": "http://alexmaccaw.com",
"avatar": "https://d1ts43dypk8bqh.cloudfront.net/v1/avatars/d54c54ad-40be-4305-8a34-0ab44710b90d",
"employment": {
"domain": "clearbit.com",
"name": "Clearbit",
"title": "Co-founder, CEO",
"role": "leadership",
"subRole": "ceo",
"seniority": "executive"
},
"facebook": {
"handle": "amaccaw"
},
"github": {
"handle": "maccman",
"avatar": "https://avatars.githubusercontent.com/u/2142?v=2",
"company": "Clearbit",
"blog": "http://alexmaccaw.com",
"followers": 2932,
"following": 94
},
"twitter": {
"handle": "maccaw",
"id": "2006261",
"bio": "O'Reilly author, software engineer & traveller. Founder of https://clearbit.com",
"followers": 15248,
"following": 1711,
"location": "San Francisco",
"site": "http://alexmaccaw.com",
"avatar": "https://pbs.twimg.com/profile_images/1826201101/297606_10150904890650705_570400704_21211347_1883468370_n.jpeg"
},
"linkedin": {
"handle": "pub/alex-maccaw/78/929/ab5"
},
"googleplus": {
"handle": null
},
"gravatar": {
"handle": "maccman",
"urls": [
{
"value": "http://alexmaccaw.com",
"title": "Personal Website"
}
],
"avatar": "http://2.gravatar.com/avatar/994909da96d3afaf4daaf54973914b64",
"avatars": [
{
"url": "http://2.gravatar.com/avatar/994909da96d3afaf4daaf54973914b64",
"type": "thumbnail"
}
]
},
"fuzzy": false,
"emailProvider": false,
"indexedAt": "2016-11-07T00:00:00.000Z"
},
"company": {
"id": "3f5d6a4e-c284-4f78-bfdf-7669b45af907",
"name": "Uber",
"legalName": "Uber Technologies, Inc.",
"domain": "uber.com",
"domainAliases": [
"uber.org",
"ubercab.com"
],
"site": {
"phoneNumbers": [],
"emailAddresses": [
"domains@uber.com"
]
},
"category": {
"sector": "Information Technology",
"industryGroup": "Software & Services",
"industry": "Internet Software & Services",
"subIndustry": "Internet Software & Services",
"sicCode": "47",
"naicsCode": "51"
},
"tags": [
"Technology",
"Marketplace",
"Mobile",
"B2C",
"Ground Transportation",
"Transportation",
"Internet"
],
"description": "Get a taxi, private car or rideshare from your mobile phone. Uber connects you with a driver in minutes. Use our app in cities around the world.",
"foundedYear": 2009,
"location": "1455 Market St, San Francisco, CA 94103, USA",
"timeZone": "America/Los_Angeles",
"utcOffset": -7,
"geo": {
"streetNumber": "1455",
"streetName": "Market Street",
"subPremise": null,
"city": "San Francisco",
"postalCode": "94103",
"state": "California",
"stateCode": "CA",
"country": "United States",
"countryCode": "US",
"lat": 37.7752315,
"lng": -122.4175278
},
"logo": "https://logo.clearbit.com/uber.com",
"facebook": {
"handle": "uber"
},
"linkedin": {
"handle": "company/uber-com"
},
"twitter": {
"handle": "Uber",
"id": "19103481",
"bio": "Evolving the way the world moves by seamlessly connecting riders to drivers through our app. Question, concern, or praise? Tweet at @Uber_Support.",
"followers": 570351,
"following": 377,
"location": "Global",
"site": "http://something.com/11eIV5LX3Z",
"avatar": "https://pbs.twimg.com/profile_images/697242369154940928/p9jxYqy5_normal.png"
},
"crunchbase": {
"handle": "organization/uber"
},
"emailProvider": false,
"type": "private",
"ticker": null,
"identifiers": {
"usEIN": "452647441"
},
"phone": null,
"indexedAt": "2016-11-07T00:00:00.000Z",
"metrics": {
"alexaUsRank": 544,
"alexaGlobalRank": 943,
"employees": 20313,
"employeesRange": "10k-50k",
"marketCap": null,
"raised": 10610000000,
"annualRevenue": null,
"estimatedAnnualRevenue": "$1B-$10B",
"fiscalYearEnd": 12
},
"tech": [
"optimizely",
"tealium",
"atlassian_confluence",
"workday",
"talend",
"oracle_peoplesoft",
"salesforce",
"teradata",
"apache_kafka",
"aws_dynamodb",
"grafana",
"factset",
"dropbox"
],
"techCategories": [
"analytics",
"advertising",
"productivity",
"human_capital_management",
"data_management",
"business_management",
"crm",
"monitoring"
],
"parent": {
"domain": null
},
"ultimateParent": {
"domain": null
}
} }
我已经设置了一个脚本来帮助我遍历对象并将其父键作为输入的名称属性返回,然后将该行项目的值作为输入的值。如果该值是一个对象,我将跳入该对象并找到该值不是对象的第一个实例,然后返回该键加上父键和该值作为输入的名称和输入的值, 分别。例如,在下面的片段中,我不会返回,我会跳进公司并返回等等。这一切都很好:
"company": {
"id": "3f5d6a4e-c284-4f78-bfdf-7669b45af907",
"name": "Uber",
"legalName": "Uber Technologies, Inc.",
"domain": "uber.com",
"domainAliases": [
"uber.org",
"ubercab.com"
],
我遇到的问题是存在值是数组的实例。在这些情况下,我希望将值数组连接为一个以逗号分隔的字符串,并将其设置为数组之前的最后一个键的值。在上面我会寻找输出如下:
<input name="companyId" value="3f5d6a4e-c284-4f78-bfdf-7669b45af907" />
<input name="companyName" value="Uber" />
<input name="companyLegalName" value="Uber Technologies, Inc." />
<input name="companyDomain" value="uber.com" />
<input name="companyDomainAliases" value="uber.org, ubercab.com" /> <!-- note this line is an array in the JSON object -->
我的代码如下:
function iterate(obj, stack) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (typeof obj[property] == "object") {
iterate(obj[property], stack + property.charAt(0).toUpperCase() + property.slice(1));
} else {
console.log(stack.charAt(0).toLowerCase() + stack.slice(1) + property.charAt(0).toUpperCase() + property.slice(1) + " : " + obj[property]);
var content = document.getElementById('detailForm');
var formInput = document.createElement("input");
var formInputName = stack.charAt(0).toLowerCase() + stack.slice(1) + property.charAt(0).toUpperCase() + property.slice(1);
var formInputValue = obj[property];
formInput.setAttribute('name', formInputName);
formInput.setAttribute('value', formInputValue);
content.appendChild(formInput);
}
}
}
}
iterate(object, '')
对于上面的示例,我希望输出是:
<input name="companyDomainAliases" value="uber.org, ubercab.com">
我有一个带有我当前工作代码的Codepen 。
解决方案
这是您的代码的修改。我添加了一个额外的参数来尝试保持您的整体结构并产生您想要的结果并防止对数组元素的重复调用。
function iterate(obj, stack,sublist)
{
for (var property in obj)
{
if (obj.hasOwnProperty(property))
{
if (typeof obj[property] == "object" && obj[property])
{
var subL = null;
if(obj[property] && obj[property].length>1)
{
subL =obj[property];
}
iterate(obj[property], stack + property.charAt(0).toUpperCase() + property.slice(1),subL);
}
else
{
var valueStr=obj[property];
var lastPart = property.charAt(0).toUpperCase() + property.slice(1);
if(sublist)
{
var i;
valueStr = sublist[0] ;
for (i = 1; i < sublist.length; i++)
{
valueStr += ","+sublist[i];
}
lastPart = "";
//console.log(valueStr);
}
//console.log(stack.charAt(0).toLowerCase() + stack.slice(1) + property.charAt(0).toUpperCase() + property.slice(1) + " : " + obj[property]);
var content = document.getElementById('detailForm');
var formInput = document.createElement("input");
var formInputName = stack.charAt(0).toLowerCase() + stack.slice(1) + lastPart;
var formInputValue = valueStr;
formInput.setAttribute('name', formInputName);
formInput.setAttribute('value', formInputValue);
// formInput.setAttribute('type', 'hidden');
content.appendChild(formInput);
//if(sublist)
// console.log(formInput);
}
}
if(obj==sublist)
break;
}
}
推荐阅读
- angular - 角剪贴板 CDK 在子组件内不起作用
- c++ - 重载字符向量和字符串c ++时,对成员函数的调用不明确
- unit-testing - #include 中的错误
使用 PlatformIO - python - 将标题列表与其相应链接的单独列表配对的最佳方法?(bs4)
- python - 如何从用户输入中删除特定字符?
- r - 为什么 $ 与线性模型的摘要不部分匹配?
- firebase - 如何使用 firebase 云存储在 firebase 函数中获取 downloadUrl/media url?
- python-3.x - 如何在python3中打印带有嵌入空格的字符串
- database - 无法连接到 ubuntu 上的 postgres
- python - 具有多个值的 Pandas 无法按预期工作