I am using Vue.js
What I want is to get one column named 'name'
from the multidimensional array.
I am not sure the dimensional size of this multidimensional array.
Sample array is here
{
"form":{
"id":"123465",
"title":"User Information",
"fields":[
{
"type":"date",
"title":"Document date",
"name":"document_date",
"required":true
},
{
"type":"input",
"title":"Document no",
"name":"document_no",
"required":true
}
],
"tabs":{
"xxx-general":{
"title":"General",
"fields":[
{
"type":"date",
"title":"DOB",
"name":"dob"
},
{
"type":"toggle",
"title":"Keep my profile private",
"name":"is_private"
},
]
},
"xxx-times":{
"title":"Ticket",
"fields":[
{
"type":"datetime",
"title":"Arrival time",
"name":"arrival_time"
},
[
{"type":"number","title":"Quantity","name":"quantity"},
{"type":"currency","title":"Price","name":"price"}
]
]
}
}
}
}
I know there is array_column
function in PHP, I want to use the javascript function equivalent to this PHP function.
Anyone helps me
there is no a native method to do perform a deep find but implementation is actually pretty easy:
//return an array of objects according to key, value, or key and value matching
function getObjects(obj, key, val) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getObjects(obj[i], key, val));
} else
//if key matches and value matches or if key matches and value is not passed (eliminating the case where key matches but passed value does not)
if (i == key && obj[i] == val || i == key && val == '') { //
objects.push(obj);
} else if (obj[i] == val && key == ''){
//only add if the object is not already in the array
if (objects.lastIndexOf(obj) == -1){
objects.push(obj);
}
}
}
return objects;
}
//return an array of values that match on a certain key
function getValues(obj, key) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getValues(obj[i], key));
} else if (i == key) {
objects.push(obj[i]);
}
}
return objects;
}
//return an array of keys that match on a certain value
function getKeys(obj, val) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getKeys(obj[i], val));
} else if (obj[i] == val) {
objects.push(i);
}
}
return objects;
}
var json = '{"glossary":{"title":"example glossary","GlossDiv":{"title":"S","GlossList":{"GlossEntry":{"ID":"SGML","SortAs":"SGML","GlossTerm":"Standard Generalized Markup Language","Acronym":"SGML","Abbrev":"ISO 8879:1986","GlossDef":{"para":"A meta-markup language, used to create markup languages such as DocBook.","ID":"44","str":"SGML","GlossSeeAlso":["GML","XML"]},"GlossSee":"markup"}}}}}';
var js = JSON.parse(json);
//example of grabbing objects that match some key and value in JSON
console.log(getObjects(js,'ID','SGML'));
//returns 1 object where a key names ID has the value SGML
//example of grabbing objects that match some key in JSON
console.log(getObjects(js,'ID',''));
//returns 2 objects since keys with name ID are found in 2 objects
//example of grabbing obejcts that match some value in JSON
console.log(getObjects(js,'','SGML'));
//returns 2 object since 2 obects have keys with the value SGML
//example of grabbing objects that match some key in JSON
console.log(getObjects(js,'ID',''));
//returns 2 objects since keys with name ID are found in 2 objects
//example of grabbing values from any key passed in JSON
console.log(getValues(js,'ID'));
//returns array ["SGML", "44"]
//example of grabbing keys by searching via values in JSON
console.log(getKeys(js,'SGML'));
//returns array ["ID", "SortAs", "Acronym", "str"]
Ref: http://techslides.com/how-to-parse-and-search-json-in-javascript
</div>
As others already said, there is no native solution (as a function) in JavaScript. Instead, you have to use multiple steps. You might want to create some general purpose functions which you can use later on.
Hint: I shortended your example data for better readability!
var DATA = {
"form":{
"id":"123465",
"title":"User Information",
"fields":[
{
"type":"date",
"title":"Document date",
"name":"document_date",
"required":true
},
{
"type":"input",
"title":"Document no",
"name":"document_no",
"required":true
}
],
"tabs":{
// ... shortened ...
}
}
}
// ====== GENERAL PURPOSE FUNCTIONS ======
function prop (path, obj) {
return path.split('.').reduce(function (p, name) {
return p == null ? p : p[name];
}, obj);
}
function mapMaybe (func, arr) {
return Array.isArray(arr) ? arr.map(func) : [];
}
function mapDeep (path, func, obj) {
return mapMaybe(func, prop(path, obj));
}
// ====== SOLUTION ======
console.log(mapDeep('form.fields', function (x) { return x.name; }, DATA))
</div>
Just to add one more solution to previous answers:
const data = {
"form":{
"id":"123465",
"title":"User Information",
"fields":[
{
"type":"date",
"title":"Document date",
"name":"document_date",
"required":true
},
{
"type":"input",
"title":"Document no",
"name":"document_no",
"required":true
}
],
"tabs":{
"xxx-general":{
"title":"General",
"fields":[
{
"type":"date",
"title":"DOB",
"name":"dob"
},
{
"type":"toggle",
"title":"Keep my profile private",
"name":"is_private"
},
]
},
"xxx-times":{
"title":"Ticket",
"fields":[
{
"type":"datetime",
"title":"Arrival time",
"name":"arrival_time"
},
[
{"type":"number","title":"Quantity","name":"quantity"},
{"type":"currency","title":"Price","name":"price"}
]
]
}
}
}
};
const re = /"name"\s*:\s*"(.+?)(?<!\\)"/g;
const names = [];
const json = JSON.stringify(data);
let p;
while ((p = re.exec(json)) !== null) {
names.push(p[1]);
}
console.log(names);
</div>
var x = [
{field: 'id', title: 'ID', th_attr: {width: '100px', title: "ID啊"}, td_attr: {title: "${id}"}, order: 3}
,{field: 'image', 'title': '产品图片', th_attr: {width: '50px', title: "产品图片"}, td_attr: {title: '123'}, template: '__AIMG__'}
,{field: 'pro_title', 'title': '产品名', th_attr: {width: '100px', title: "产品名"}, td_attr: {title: 'this is pro_title:${pro_title}'}}
];
function array_column(array, field) {
return array.map(v => v[field]);
}
console.log(array_column(x, 'field'));