/foreach-iterate-array-javascript/

[panzerdp]

Written on 07/03/2019 10:01:54

URL: https://dmitripavlutin.com/foreach-iterate-array-javascript/

[W-D0n]

Hello, i'm a JS beginner and i'm stuck with array/objects items. I get a json file with a fetch request and i would like to extract a part of data.

My data looks like that :

{
"profil": [
  {
    "name": "",
    "id": ,
    "city": "",
    "country": "",
    "tags": ["", "", "", ""],
    "text": "",
    "price": 
  },

So it's an object, wich contain an array which contain a bunch of objects which contain a "tags" array....

I don't find a way to access tags items (wihtout array index) with forEach loops...

Could you help me ?

[WORMSS]

@WARDI-Kamal hello. First, you can parse code like this with markdown to keep the formatting ```json { "your": "data" } ```

as for your question, the problem comes down to the fact that you have 2 arrays here, the array for profil and the array for tags.. So the question really comes down to, what do you want to do if you have two profil or three, or four. If we ignore the "foreach" function for now, and go with a "for...of" loop to help you read what is going on a little easier, then hopefully you can go back over this article with a better understanding of your own problem.

const data = /* how ever you fill your data from the fetch */;
for ( const currentProfil of data.profil ) {
  // this loop will run for every profil you have.
  console.log("profil", profil.name);
  for ( const tag of currentProfil.tags ) {
    // this loop will run for every tag you have within that profil item
    console.log("tag", tag);
  }
}

so depending on your data, you could end up with something like (cut down for simplicity)

{
  "profil": [
    { "name": "my first profil", "tags": ["my first tag", "my second tag"] },
    { "name": "my second profil", "tags": ["my third tag, but it is the first tag of my second profil"] }
  ]
}

profil my first profil
tag my first tag
tag my second tag
profil my second profil
tag my third tag, but it is the first tag of my second profil

[W-D0n]

Thank you for your answer. I had issue with your proposition : profil was not defined...

I end up with this solution 👍

.then((data) => {
    const tagList = []
    const tags = data.photographers.flatMap(({ tags = [] }) => tags)
    console.log(tags)
    tags.forEach(tag => {
      if (!tagList.includes(tag)) {
        tagList.push(tag)
      }
    })
    console.log(tagList)
  })

flatmap() gave me an array with all tags so i used forEach+if to get only one occurence of tags (i have to include those in html links).

[WORMSS]

Thank you for your answer. I had issue with your proposition : profil was not defined...

profil came from your example of your data structure, not my own. if you just needed a list of unique values, that would have been much easier as

const tagList = [...new Set(data.photographers.map(p => p.tags ?? []).flat())];

[W-D0n]

i didn't mean it was your fault or error, just an information. it's my code, my mistake obviously. I was trying to understand, there is so much way to find solution that i was lost, probably lack of fundamentals concepts...

For example, your proposition, i don't know these notations :

...new 

and

p.tags ?? [] 

it works aswell