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

Does this answer your question? [Iteration Of JSON Array Of Objects Not Working](https://stackoverflow.com/questions/10509524/iteration-of-json-array-of-objects-not-working) — Rahul Kumar, May 21 '21 at 18:17
@AgamS - Sorry my bad. Try this one - https://stackoverflow.com/questions/31020898/how-to-iterate-json-object-properly — Kinglish, May 21 '21 at 18:21

score 2 · Accepted Answer · answered May 21 '21 at 18:27

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

Thank you, and what if there are two arrays inside data Objects. like we have this also:- "retailerAgent": [{ "agentID": "3t0772c-2470-4eaa-bc0c-61429700781cd", "agentName": { "name": "Mark", "__typename": "agent" } }, { "agentID": "d674da56-0f53-4694-b6dc-0eb5a3aa2990", "agentName": { "name": "Sunny", "__typename": "agent" } }], — Agam S, May 21 '21 at 21:12

score 1 · Answer 2 · answered May 21 '21 at 18:54

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

score 1 · Answer 3 · answered May 21 '21 at 19:26

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.

thank you for your answer and what if is another array of objects inside data object like:- "retailerAgent": [{ "agentID": "3t0772c-2470-4eaa-bc0c-61429700781cd", "agentName": { "name": "Mark", "__typename": "agent" } }, { "agentID": "d674da56-0f53-4694-b6dc-0eb5a3aa2990", "agentName": { "name": "Sunny", "__typename": "agent" } }], — Agam S, May 21 '21 at 21:15

iterating through a each key of a JSON

3 Answers3