遍歷 JSON 的每個鍵

Question

數據

   {
   "_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]} 
})

但無法迭代數組鍵

預計 Output

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

並檢查不是 null

Answer 1

對於嵌套的 object arrays，您需要創建一個查找 map 和 ZC1C425268E68385D1AB5074F 訪問嵌套數據。

 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; }

Answer 2

你在尋找這樣的東西嗎？

const tifOptionsES6 = Object.keys(d).map(key => {
    const current = d[key]; // gets current element
    if (key.startsWith('_')) return ''; // exits if starts with _
    if (key == 'retailerLanguage') { // check for a key
        let names = []; // creates a new list
        for (elem of current) { // loop through elements of sub-array
            names.push(elem.language.name) // adds name to list
        }
        const formattedNames = names.reduce((a, c) => a + ', ' + c); // format names to be readable
        return `Edited "${key}" to ${formattedNames}` // return
    } else {
        return `Edited "${key}" to ${current}` // return
    }
});

Answer 3

在這里替代Polywhirl 先生的搖滾明星解決方案，這是一種非常簡單的方法，從長遠來看您不會使用，但這說明了您需要的機制：

第一：你的

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

語法錯誤，應該是這樣的

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

（你顯然在 React 操場上嘗試過？）

請注意，Polywhirl 先生使用與 JSX 的“{}”有危險相似性的模板文字來放置 JS 代碼——我們通過字符串連接保持簡單。

如果您的數據在您的示例中是固定的，那么 go 可以像這樣

const tifOptionsES6 = Object.keys(d).map(key => {
  if( key === 'retailerLanguage' ) {
    d[key].forEach( entry =>
      'Edited "' + key + '" to "' +  entry['language']['name'] 
    )
  } else {
    return 'Edited "' + key + '" to "' +  d[key] ;
  }
})

如果您隨后通過 JavaScript 原型（例如 .filter()、.startswith()）到可選鏈接的豐富方法世界（並且不在您仍然必須支持 IE 9 的業務中），您准備好在 Polywhirl 先生令人印象深刻的解決方案的基礎上再接再厲。