iterating through a each key of a JSON

Question

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

I have tried this:

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

but unable to iterate for array key

Expected 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

and also check for not null

Answer 1

For nested object arrays, you will need to create a lookup map with function for accessing the nested data.

 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

Are you looking for something like this?

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

Alternative to Mr. Polywhirl's rock star solution here a very simple approach you would not use in the long run, but that illustrates the mechanics you need:

First: your

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

is syntactically wrong, it should be something like

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

(You obviously tried around in a React playground?)

Note that Mr. Polywhirl uses Template Literals that have a dangerous similarity to JSX's "{}" for placing JS code - we stay simple with string concatenation.

If your data is fixed as in your example, a very transparent way could go like this

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

If you then make your way through the rich world of methods of JavaScript prototypes (eg. .filter(), .startswith()) up to Optional chaining (and are not in a business where you still have to suppport IE 9), you are ready to build upon Mr. Polywhirl's impressing solution.