时间戳

首页 > 解决方案 > 遍历 JSON 的每个键

javascript - 遍历 JSON 的每个键

问题描述

数据

   {
   "_id": "3fad6024-3226-451b-9e81-1c544aaaebf7",
   "name": "ank retailer part 2",
   "aboutUs": "part 2 updated",
   "retailerLanguage": [
      {
         "languageID": "20b4772c-2470-4eaa-bc0c-61429700781cd",
         "language": {
            "name": "Koreandddd",
            "__typename": "language"
         }
      },
      {
         "languageID": "8f04da56-0f53-4694-b6dc-0eb5a3aa2990",
         "language": {
            "name": "Mandarin",
            "__typename": "language"
         }
      }
   ],
   "termsAndConditions": "agreed"
}

我试过这个：

const tifOptionsES6 = Object.keys(d).map(key => {
  return Edited "{key}" to {d[key]} 
})

但无法迭代数组键

预期产出

Edited "name" to ank retailer part 2 
Edited "aboutUs" to part 2 updated
Edited "retailerLanguage" to Koreandddd , Mandarin
Edited "termsAndConditions" to part 2 agreed

并检查不为空

标签： javascriptjsonreactjs

解决方案

对于嵌套对象数组，您需要创建一个带有访问嵌套数据的函数的查找图。

const data = {
  "_id": "3fad6024-3226-451b-9e81-1c544aaaebf7",
  "name": "ank retailer part 2",
  "aboutUs": "part 2 updated",
  "retailerLanguage": [{
    "languageID": "20b4772c-2470-4eaa-bc0c-61429700781cd",
    "language": {
      "name": "Koreandddd",
      "__typename": "language"
    }
  }, {
    "languageID": "8f04da56-0f53-4694-b6dc-0eb5a3aa2990",
    "language": {
      "name": "Mandarin",
      "__typename": "language"
    }
  }],
  "termsAndConditions": "agreed"
}

const keyValueMap = {
  retailerLanguage: ({ language: { name } }) => name
};

const tifOptionsES6 = data =>
  Object.entries(data)
    .filter(([key]) => !key.startsWith('_'))
    .map(([key, value]) =>
      `Edited "${key}" to ${Array.isArray(value)
        ? value.map(e => keyValueMap[key]?.(e) ?? e).join(', ')
        : keyValueMap[key]?.(value) ?? value
      }`).join('\n');

console.log(tifOptionsES6(data));
.as-console-wrapper { top: 0; max-height: 100% !important; }

推荐阅读