Home / Questions / 131984
Accepted
gmarsi
Asked: 2020-01-19 06:40:56 +0800 CST 2020-01-19 06:40:56 +0800 CST

Get the property of an object if I have the property name as a string

  • 772

I have an objects object. Represents each programming language and its respective color (source: github ):

colors = {
  '1C Enterprise': {
    'color': '#814CCC',
    'url': 'https://github.com/trending?l=1C-Enterprise'
  },
  'ABAP': {
    'color': '#E8274B',
    'url': 'https://github.com/trending?l=ABAP'
  },
  'ActionScript': {
    'color': '#882B0F',
    'url': 'https://github.com/trending?l=ActionScript'
  },
  'Ada': {
    'color': '#02f88c',
    'url': 'https://github.com/trending?l=Ada'
  }
  //...
}

How would a function be made with Javascript which, receiving the name of a language, would return its color. For example devolverColor('Ada')return#02f88c

javascript

3 Answers

  1. I would put:

     var colors = {
        '1C Enterprise': {
          'color': '#814CCC',
          'url': 'https://github.com/trending?l=1C-Enterprise'
        },'ABAP': {
          'color': '#E8274B',
          'url': 'https://github.com/trending?l=ABAP'
        },'ActionScript': {
          'color': '#882B0F',
          'url': 'https://github.com/trending?l=ActionScript'
        },'Ada': {
          'color': '#02f88c',
          'url': 'https://github.com/trending?l=Ada'
        }
       };

 console.log (colors['ActionScript'].color);

    You can make a function and pass the language as a parameter, but like the other example that they just sent you, you have to make sure that the language is well written.

    • 4
  2. Best Answer

    The function would be very simple:

    function getColorNotSafe(languaje){
  return colors[languaje].color;
}

    BUT it is not safe.

    Let's see:

    All good here

    var colors = {
  '1C Enterprise': {
    'color': '#814CCC',
    'url': 'https://github.com/trending?l=1C-Enterprise'
  },
  'ABAP': {
    'color': '#E8274B',
    'url': 'https://github.com/trending?l=ABAP'
  },
  'ActionScript': {
    'color': '#882B0F',
    'url': 'https://github.com/trending?l=ActionScript'
  },
  'Ada': {
    'color': '#02f88c',
    'url': 'https://github.com/trending?l=Ada'
  }
};

console.log(getColorNotSafe("Ada"));

function getColorNotSafe(languaje){
  return colors[languaje].color;
}

    NOT EVERYTHING GOOD HERE

    The problem is that this function allows us to pass anything to it. Who is going to control that? Suppose we try to find Ada5:

        var colors = {
      '1C Enterprise': {
        'color': '#814CCC',
        'url': 'https://github.com/trending?l=1C-Enterprise'
      },
      'ABAP': {
        'color': '#E8274B',
        'url': 'https://github.com/trending?l=ABAP'
      },
      'ActionScript': {
        'color': '#882B0F',
        'url': 'https://github.com/trending?l=ActionScript'
      },
      'Ada': {
        'color': '#02f88c',
        'url': 'https://github.com/trending?l=Ada'
      }
    };

    console.log(getColorNotSafe("Ada5"));

    function getColorNotSafe(languaje){
      return colors[languaje].color;
    }

    Better here

    So, it is convenient to write a safe function, which returns at least nullif it does not find the property that is being passed:

    var urlGit='https://github.com/trending?l=';
var colors = {
  '1C Enterprise': {
    'color': '#814CCC',
    'url': urlGit+'1C-Enterprise'
  },
  'ABAP': {
    'color': '#E8274B',
    'url': urlGit+'ABAP'
  },
  'ActionScript': {
    'color': '#882B0F',
    'url': urlGit+'ActionScript'
  },
  'Ada': {
    'color': '#02f88c',
    'url': urlGit+'Ada'
  }
};

console.log(getColor("Ada"));
console.log(getColor("Ada5"));

function getColor(languaje) {
  var resultado=colors.hasOwnProperty(languaje) ? colors[languaje].color : null;
  return resultado;
}

    another bonus

    Note that an interesting re-game could be made for the url: it would be to combine the received parameter with the variable urlGit... I have not dared to do it because the values ​​are not normalized in the case of the first option. I put this note to open that possibility, looking to simplify the code, making it less repetitive.

    • 4

  3. Try accessing the properties of an object using index access objeto[nombrePropiedad].

    Example:

    colors = {
  '1C Enterprise': {
    'color': '#814CCC',
    'url': 'https://github.com/trending?l=1C-Enterprise'
  },
  'ABAP': {
    'color': '#E8274B',
    'url': 'https://github.com/trending?l=ABAP'
  },
  'ActionScript': {
    'color': '#882B0F',
    'url': 'https://github.com/trending?l=ActionScript'
  },
  'Ada': {
    'color': '#02f88c',
    'url': 'https://github.com/trending?l=Ada'
  }
};

console.log(colors["Ada"].color);
console.log(colors["1C Enterprise"].color);

    Just make sure you send him the property name correctly.

    You can also define a function that returns the color directly if you need it:

    colors = {
  '1C Enterprise': {
    'color': '#814CCC',
    'url': 'https://github.com/trending?l=1C-Enterprise'
  },
  'ABAP': {
    'color': '#E8274B',
    'url': 'https://github.com/trending?l=ABAP'
  },
  'ActionScript': {
    'color': '#882B0F',
    'url': 'https://github.com/trending?l=ActionScript'
  },
  'Ada': {
    'color': '#02f88c',
    'url': 'https://github.com/trending?l=Ada'
  }
};

colors.devolverColor = function(lenguaje){
   return (this[lenguaje].color);
}

console.log(colors.devolverColor("Ada"));

    • 2