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.

Improve this question
4
  • 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) :-) Commented Feb 23, 2018 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?? Commented Feb 23, 2018 at 15:58
  • console.log(category[lang]) returns no error, but what does it display? Commented Feb 23, 2018 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? Commented Feb 23, 2018 at 16:03

3 Answers 3

Reset to default
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)

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

8 Comments

I think this is not the problem
Well I think it is, because if you use "fr", the code works.
If that was the problem, the error would be fr is not defined
Well, run my snippet. If you use "fr", it works. What else can I say
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.
|
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));

Improve this answer

1 Comment

And then, how do you get a parametric lang, if there's more than fr? Say, en or de?
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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.