Home > OS >  Javascript json filter with arrow function
Javascript json filter with arrow function

Time:10-18

I was wondering how I can filter the values "tags" in the json above using an arrow function:

const ttag = [{
    "code": 795302828,
    "code_integration": "123",
    "company": "ACME LTD",
    "phone": "135575788",
    "tags": [{"tag": "companyAA"},
             {"tag": "companyBB"},
             {"tag": "companyCC"},
             {"tag": "companyDD"}
            ],
    "status": "Y"
}]

const onlyTags = ttag.filter(f => f.tags)
console.log(onlyTags)

expected result: ['companyAA', 'companyBB', 'companyCC', 'companyDD']

CodePudding user response:

First of all, that's not how filter method works. Filter returns an array with values that are true for function passed as the argument. More you can read here.

You could use map & flatMap, like this:

ttag.flatMap(f => f.tags.map(t => t.tag));

map returns array of values specified in the passed method. flatMap does the same, but if the result is an array it flattens it, so result is an array of strings instead of an array of arrays of strings.

Important

flatMap is not supported in Internet Explorer, but it's already unsupported browser so I wouldn't bother.

CodePudding user response:

You can iterate through your array and push the results to a new array, something like this

const ttag = [{
    "code": 795302828,
    "code_integration": "123",
    "company": "ACME LTD",
    "phone": "135575788",
    "tags": [{"tag": "companyAA"},
             {"tag": "companyBB"},
             {"tag": "companyCC"},
             {"tag": "companyDD"}
            ],
    "status": "Y"
}]

const res = [];
ttag.forEach(x => {
    x.tags.forEach(y => {
        res.push(y.tag);
    })
})

console.log(res);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Maybe an ugly way to do it, but with the first .map you get each item of the main array, and with the second .map an array of tags inside it.

const ttag = [{
    "code": 795302828,
    "code_integration": "123",
    "company": "ACME LTD",
    "phone": "135575788",
    "tags": [{"tag": "companyAA"},
             {"tag": "companyBB"},
             {"tag": "companyCC"},
             {"tag": "companyDD"}
            ],
    "status": "Y"
}]

const onlyTags = ttag.map(f => f.tags.map(t => t.tag));
console.log(onlyTags);
console.log(onlyTags[0]); // expected output
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Here's one solution using map and reduce. At the end the array is flatten so it returns only an array containing the city names

const ttag = [{
  "code": 795302828,
  "code_integration": "123",
  "company": "ACME LTD",
  "phone": "135575788",
  "tags": [{
      "tag": "companyAA"
    },
    {
      "tag": "companyBB"
    },
    {
      "tag": "companyCC"
    },
    {
      "tag": "companyDD"
    }
  ],
  "status": "Y"
}]

const result = ttag.map(obj => obj.tags.reduce((acc, next) => [...acc, next.tag], [])).flat()
console.log(result)
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

This should work in all browsers I believe:

const ttag = [
  {
      "code": 795302828,
      "code_integration": "123",
      "company": "ACME LTD",
      "phone": "135575788",
      "tags": [{"tag": "companyAA"},
               {"tag": "companyBB"},
               {"tag": "companyCC"},
               {"tag": "companyDD"}
              ],
      "status": "Y"
  },
  {
      "code": 795302829,
      "code_integration": "124",
      "company": "ACME2 LTD",
      "phone": "135575789",
      "tags": [{"tag": "companyEE"},
               {"tag": "companyFF"},
               {"tag": "companyJJ"}
              ],
      "status": "Y"
  }
]

const onlyTags = ttag.map(f => f.tags.map(t => t.tag)).reduce((p, c) => [].concat(p,c));
console.log(onlyTags);
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related