在 JSON 查询中使用变量

Question

I am trying to write a function that can take a field name as an argument and return an array of corresponding values from a bit of JSON.

Example object:

var myObject = [
   {"x": 10, "y": 10},
   {"x": 20, "y": 10},
   {"x": 20, "y": 20},
   {"x": 10, "y": 20}
];

My function looks something like this:

function getValues(desiredValue) {
   var values = [];
   for (i = 0; i < myObject.length; i++) {
      values[i] = myObject[i].desiredValue;
   }
   return values;
}
getValues(x);

Ideally, I would have the argument x passed to the getValues which, instead of looking for a field name called desiredValue would look for a field name called x .

The returned array should look like this:

[10,20,20,10]

As the problem with this code is obvious, how can I get the desired result?

Also, I am trying to avoid unnecessary dependencies, so please don't give me any JQuery unless absolutely necessary.

Answer 1

You can use map() to return desired result.

 var myObject = [ {"x": 10, "y": 10}, {"x": 20, "y": 10}, {"x": 20, "y": 20}, {"x": 10, "y": 20} ]; function getValues(desiredValue) { return myObject.map(e => e[desiredValue]); } console.log(getValues('x'))

Answer 2

You actually need to parse the given JSON string (not the array that you have given here) by using JSON.parse(). See: http://jsbin.com/kevoqe/edit?js,console

Answer 3

a simple utility

//also accepts a path like "foo.bar.baz"
//returns undefined if path can't be resolved
function fetch(path){
    var keys = path.split(".");
    return function( target ){
        for(var t = target, i = 0; i < keys.length; t = t[ keys[ i++ ] ])
            if(t == null) return void 0;
        return t;
    }
}

and it's usage

var myObject = [
    {"x": 10, "y": 10},
    {"x": 20, "y": 10},
    {"x": 20, "y": 20},
    {"x": 10, "y": 20}
];

var result = myObject.map( fetch("y") );

this version is a bit more flexible than one hardwired with Array.map() because it can easily be composed with other functions.

Although, especially in this particular case, this already is a little bit of overkill. here you can easily write:

var result = myObject.map(pt => pt.y);

you can't get any shorter and simpler. Or if for some reason the property really is dynamic, you'll have some variable containing it:

var dynamicPropertyName = "y";
//...
var result = myObject.map(pt => pt[ dynamicPropertyName ]);

Answer 4

Use array map method to do manipulation in an array of objects.

Try this code :

var myObject = [
   {"x": 10, "y": 10},
   {"x": 20, "y": 10},
   {"x": 20, "y": 20},
   {"x": 10, "y": 20}
];

var output = getValues("x");
console.log(output);

function getValues(desiredValue) {
  return myObject.map(function(item) {
      return item[desiredValue];   
  });
}

Output :

Working fiddle : https://jsfiddle.net/ffyjyzjb/