Dynamically get values of object from array

Question

Let's say I have an Object myBook and an array allCategories.

const allCategories = ["sciencefiction", "manga", "school", "art"];

const myBook = {
   isItScienceFiction: true,
   isItManga: false,
   isItForKids: false
}

What I want : Loop over categories to check the value of Book, for example, check if "sciencefiction" exists in my Book Object and then check it's value

What I have tried :

1) With indexOf

allCategories.map((category) => {
    Object.keys(myBook).indexOf(category) 
    // Always returns -1 because "sciencefiction" doesn't match with "isItScienceFiction"
});

2) With includes

allCategories.map((category) => {
    Object.keys(myBook).includes(category) 
    // Always returns false because "sciencefiction" doesn't match with "isItScienceFiction"
});

Expected output :

allCategories.map((category) => {
   // Example 1 : Returns "sciencefiction" because "isItScienceFiction: true"
   // Example 2 : Returns nothing because "isItManga: false"
   // Example 3 : Returns nothing because there is not property in myBook with the word "school"
   // Example 4 : Returns nothing because there is not property in myBook with the word "art"


   // If category match with myBook categories and the value is true then
    return (
         <p>{category}</p>
    );
});

If you need more information, just let me know, I'll edit my question.

Well... you could loop over all book keys, remove "isIt", then lowercase it...? Not sure what exactly you're asking, since you seem to already know exactly why your approach fails. — user5734311
– user5734311, Commented Apr 11, 2019 at 10:18
Such inputs are ugly. I mean, there is no guarantee that lowercase will always solve the issue. Is there any other relation available between the object and the category? — briosheje
– briosheje, Commented Apr 11, 2019 at 10:19
Seems like a bad data design, why doesn't my book just have an array of categories? — George
– George, Commented Apr 11, 2019 at 10:20
@KévinHuang then the best you can do is either extract the lowercase part after isIt or use a regex. There isn't much else to do with such a pattern, what scares me, though, is that it's not a solid pattern, hence the chance of it failing for unknown or unpredictable reasons is quite high. — briosheje
– briosheje, Commented Apr 11, 2019 at 10:23
I would prefer myBook to have this structure, so that the absence of a category means it is not applicable to the book. That way you won't have to change ALL books once you implement isItForRobots in 3 years: const myBook = { types: [ 'sciencefiction' ]}; const myBook2 = { types: [ 'kids', 'sciencefiction' ]};. Then your problem disappears by itself. If the API can't be changed, do this transformation yourself before using the books, using the string manipulation mentioned above. — Shilly
– Shilly, Commented Apr 11, 2019 at 10:23

Nenad Vracar · Accepted Answer · 2019-04-11 10:34:36Z

3

You could use filter and find methods to return new array of categories and then use map method to return array of elements.

const allCategories = ["sciencefiction", "manga", "school", "art"];
const myBook = {isItScienceFiction: true, isItManga: false, isItForKids: false}

const result = allCategories.filter(cat => {
  const key = Object.keys(myBook).find(k => k.slice(4).toLowerCase() === cat);
  return myBook[key]
}).map(cat => `<p>${cat}</p>`)

console.log(result)

You can also use reduce instead of filter and map and endsWith method.

const allCategories = ["sciencefiction", "manga", "school", "art"];
const myBook = {isItScienceFiction: true,isItManga: false,isItForKids: false}

const result = allCategories.reduce((r, cat) => {
  const key = Object.keys(myBook).find(k => k.toLowerCase().endsWith(cat));
  if(myBook[key]) r.push(`<p>${cat}</p>`)
  return r;
}, [])

console.log(result)

edited Apr 11, 2019 at 10:34

answered Apr 11, 2019 at 10:26

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Al Amin · Accepted Answer · 2019-04-11 10:29:40Z

1

You can use

Object.keys(myBook).forEach(function(key){console.log(myBook[key])})

... place you code instead of console.log. This can do the trick without hard coding and also the best practice.

answered Apr 11, 2019 at 10:29

Al Amin

9598 silver badges12 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2019-04-11 10:30:05Z

You should really not keep a number of properties containing booleans. While that might work for 1, 2 or 3 categories, for a few hundred it won't work well. Instead, just store the categories in an array:

 const myBook = {
   categories: ["sciencefiction", "manga", "kids"],
 };

If you got some object with the old structure already, you can easily convert them:

 const format = old => {
  const categories = [];

  if(old.isItScienceFiction)
    categories.push("sciencefiction");
  if(old.isItManga)
     categories.push("manga");
  if(old.isItForKids)
     categories.push("kids");

   return { categories };
 };

Now to check wether a book contains a certain category:

  const isManga = myBook.categories.includes("manga");

And your rendering is also quite easy now:

 myBook.categories.map(it => <p>{it}</p>)

Ori Drori · Accepted Answer · 2019-04-11 10:31:04Z

1

Use Array.filter() and Array.find() with a RegExp to find categories that have matching keys. Use Array.map() to convert the categories to strings/JSX/etc...

const findMatchingCategories = (obj, categories) => {
  const keys = Object.keys(obj);
  
  return allCategories
    .filter(category => {
      const pattern = new RegExp(category, 'i');
      
      return obj[keys.find(c => pattern.test(c))];
    })
    .map(category => `<p>${category}</p>`);
};

const allCategories = ["sciencefiction", "manga", "school", "art"];

const myBook = {
   isItScienceFiction: true,
   isItManga: false,
   isItForKids: false
};

const result = findMatchingCategories(myBook, allCategories);
  
console.log(result);

answered Apr 11, 2019 at 10:31

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Comments

warl0ck · Accepted Answer · 2019-04-11 10:31:45Z

1

You can modify the key names in myBook object for easy lookup like:

const allCategories = ["sciencefiction", "manga", "school", "art"];

const myBook = {
  isItScienceFiction: true,
  isItManga: false,
  isItForKids: false
}

const modBook = {}

Object.keys(myBook).map((key) => {
  const modKey = key.slice(4).toLowerCase()
  modBook[modKey] = myBook[key]
})

const haveCategories = allCategories.map((category) => {
  if (modBook[category]) {
    return <p>{category}</p>
  }
  return null
})
console.log(haveCategories)

answered Apr 11, 2019 at 10:31

warl0ck

3,4845 gold badges31 silver badges60 bronze badges

Comments

AvcS · Accepted Answer · 2019-04-11 10:35:39Z

Converting sciencefiction to isItScienceFiction is not possible and looping all the keys of myBook for every category is not optimal.

But converting isItScienceFiction to sciencefiction is pretty easy, so you can create newMyBook from yourmyBook and use it instead to check.

Creating newMyBook is a one time overhead.

const allCategories = ["sciencefiction", "manga", "school", "art"];
const myBook = {isItScienceFiction: true,isItManga: false,isItForKids: false};

const newMyBook = Object.keys(myBook).reduce((a, k) => {
    return { ...a, [k.replace('isIt', '').toLowerCase()]: myBook[k] };
}, {});

console.log(
    allCategories.filter(category => !!newMyBook[category]).map(category => `<p>${category}</p>`)
);

Kunal Mukherjee · Accepted Answer · 2019-04-11 10:47:55Z

1

You can try like this:

const allCategories = ["sciencefiction", "manga", "school", "art"];

const myBook = {
  isItScienceFiction: true,
  isItManga: false,
  isItForKids: false
};

const myBookKeys = Object.keys(myBook);

const result = allCategories.map(category => {
  const foundIndex = myBookKeys.findIndex(y => y.toLowerCase().includes(category.toLowerCase()));
  
  if (foundIndex > -1 && myBook[myBookKeys[foundIndex]])
    return `<p>${category}</p>`;
});

console.log(result);

edited Apr 11, 2019 at 10:47

answered Apr 11, 2019 at 10:31

Kunal Mukherjee

5,8733 gold badges29 silver badges55 bronze badges

Comments

adiga · Accepted Answer · 2019-04-11 11:10:37Z

1

You could create a Map for the the categories and keys of object:

const allCategories = ["sciencefiction", "manga", "school", "art"],
      myBook = { isItScienceFiction:true, isItManga:false, isItForKids:false }

const map = Object.keys(myBook)
                   .reduce((r, k) => r.set(k.slice(4).toLowerCase(), k), new Map);

/* map:
   {"sciencefiction" => "isItScienceFiction"}
   {"manga" => "isItManga"}
   {"forkids" => "isItForKids"}
*/

allCategories.forEach(key => {
  let keyInObject = map.get(key); // the key name in object
  let value = myBook[keyInObject]; // value for the key in object
  
  console.log(key, keyInObject, value)

  if(keyInObject && value) {
    // do something if has the current key and the value is true
  }
})

edited Apr 11, 2019 at 11:10

answered Apr 11, 2019 at 10:30

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Collectives™ on Stack Overflow

Dynamically get values of object from array

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related