0

Here is a part of my object

const category = {
    fr: {
        list: [
            {id: 1, label: 'coucou'},
            {id: 2, label: 'moi'},
            {id: 3, label: 'ici'},
            {id: 4, label: 'maintenant'},
            {id: 5, label: 'demain'},
]}}
const lang = fr;
const anyId = 3;

I don't know why when doing the following:

const result = category[lang].list.find(item => item.id === anyId) console.log(result)

Throws the following:

// undefined category[lang].list.find(item => item.id === anyId) is not a function, or just undefined

same result for .map or .filter

  • console.log(category) returns no error
  • console.log(category[lang]) returns no error
  • console.log(category[lang].list) returns no error

but anything else will return an error. It drives me crazy, any help will be highly appreciated.

Johan
  • 74,508
  • 24
  • 191
  • 319
  • `const lang = 'fr'` not lteral `fr` By having `fr` not wrapped in quotes your code is expecting `fr` to have already been defined (hence the `undefined` error during run time) :-) – Francis Leigh Feb 23 '18 at 15:52
  • `is not a function, or just undefined` --> so is it the first or the second error? Is it undefined, but defined, just not a function?? – Jeremy Thille Feb 23 '18 at 15:58
  • `console.log(category[lang]) returns no error`, but what does it display? – Jeremy Thille Feb 23 '18 at 16:01
  • Your code will work wrapping that `fr` with quotes, but you need to be sure is that what you want. The variable `fr` here `const lang = fr;` is another declared variable? – Ele Feb 23 '18 at 16:03

3 Answers3

0

Use const lang = "fr" instead of const lang = fr, because fr is an undefined variable but "fr" is a string. So you'll get category["fr"] instead of category[fr].

const category = {
    fr: {
        list: [
            {id: 1, label: 'coucou'},
            {id: 2, label: 'moi'},
            {id: 3, label: 'ici'},
            {id: 4, label: 'maintenant'},
            {id: 5, label: 'demain'},
]}}
const lang = "fr";
const anyId = 3;

const result = category[lang].list.find(item => item.id === anyId)

console.log(result)
Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
  • I think this is not the problem – Ele Feb 23 '18 at 15:53
  • Well I think it is, because if you use "fr", the code works. – Jeremy Thille Feb 23 '18 at 15:54
  • If that was the problem, the error would be `fr is not defined` – Ele Feb 23 '18 at 15:56
  • Well, run my snippet. If you use `"fr"`, it works. What else can I say – Jeremy Thille Feb 23 '18 at 15:58
  • Of course it works, but this doesn't help. Imagime that `fr` is a declared variable in another part of the code and cause that the OP is facing that problem. – Ele Feb 23 '18 at 16:00
  • You're right, we need more info. OP says `is not a function, or just undefined`, these are two very different errors. Is it not a function, or is it completely undefined? `console.log(category[lang]) returns no error`, alright but what does it display? We don't know that. I'm waiting for these answers – Jeremy Thille Feb 23 '18 at 16:03
  • I agree with that. – Ele Feb 23 '18 at 16:03
  • @JeremyThille it doesn't sorry for the '' missing it wasn't on the original problem, still have to give it a try on react native though, check my answer below –  Feb 23 '18 at 16:32
0

You want category.fr not just fr, as the variable fr does not exist.

Now that lang contains your fr object, you can simply do a .find() on lang.list as below:

const category = {
    fr: {
        list: [
            {id: 1, label: 'coucou'},
            {id: 2, label: 'moi'},
            {id: 3, label: 'ici'},
            {id: 4, label: 'maintenant'},
            {id: 5, label: 'demain'},
]}}

// Fill param from a variable, or anything, as long as it's a string:
const param = 'fr';
// Use brackets here, as you want `category.fr` and not `category.param`:
const lang = category[param];
//Or you can simply use:
//const lang = category.fr; //If this is not a parameter, or user input

const anyId = 3;

console.log(lang);

console.log(lang.list.find(item => item.id === anyId));
Blue
  • 22,608
  • 7
  • 62
  • 92
0

It works on mdn sandbox

const category = {
    fr: {
        list: [
            {id: 1, label: 'coucou'},
            {id: 2, label: 'ici'},
            {id: 3, label: 'demain'},
            {id: 4, label: 'matin'},
          ]
    }
};
var lang ='fr';
var catID = 3;
console.log(lang);
console.log(catID);
console.log(category);
console.log(category[lang]);
console.log(category[lang].list);
var found = category[lang].list.find(function(element) {
   return element.id === catID;
});

console.log(found.label); // demain

just add a return inside the callback function, but it still doesn't work on react-native so the problem remains