How can I use JSON path to extract all the elements within an array from a JSON input?

Question

How can I use JSON path to extract all the elements within an array from a JSON input?

I want to extract all fields from a JSON array and turn it into a flat JSON file. Here is an example of the input:

Array JSON input:

{
    "field1": "ALNT12345",
    "field2": "ALNT345346",
    "field3": "2015353423",
    "field4": "2332124343",
    "arrayfield1": [
        {
            "arr1": "625347",
            "arr2": "rere"
        },
        {
            "arr1": "634441",
            "arr2": "sdfsd"
        }
    ]
}

The goal is to convert the above array JSON into 2 separate records like this, using JSON path:

Required Output:

[
  {
    "field1": "ALNT12345",
    "field2": "ALNT345346",
    "field3": "2015353423",
    "field4": "2332124343",
    "arr1": "625347",
    "arr2": "rere"
  },
  {
    "field1": "ALNT12345",
    "field2": "ALNT345346",
    "field3": "2015353423",
    "field4": "2332124343",
    "arr1": "634441",
    "arr2": "sdfsd"
  }
]

In my attempt with JSON path,

$.arrayfield1.*

It only retrieves array fields. If JSON path doesn't work for this, can you recommend a JavaScript code to retrieve all the fields?

Thanks.

javascript arrays json jsonpath

Answer 1

Answer №1

Consider giving this a try:

var obj = {
    "fieldA": "ALPH12345",
    "fieldB": "ALNT345346",
    "fieldC": "2015353423",
    "fieldD": "2332124343",
    "arrayField1": [
        {
            "arrVal1": "625347",
            "arrVal2": "example1"
        },
        {
            "arrVal1": "634441",
            "arrVal2": "example2"
        }
    ],
    "arrayField2": [
        {
            "arrVal1": "625347",
            "arrVal2": "example1"
        },
        {
            "arrVal1": "634441",
            "arrVal2": "example2"
        }
    ]
};

console.log(transform(obj));

function transform(obj) {
    var singleLevel = {};
    var multiLevelArr = [];
    for(var key in obj) {
        var value = obj[key];
        if(typeof value != "object") {
            singleLevel[key] = value;
        } else {
            multiLevelArr = multiLevelArr.concat(value);
        }
    }

    for(var x in multiLevelArr) {
        for(var y in singleLevel) {
            multiLevelArr[x][y] = singleLevel[y];
        }
    }

    return multiLevelArr;
}

Click the link below to test your code:

https://fiddle.jshell.net/06zfn55L/2/

Answer 2

Consider giving this a try:

var obj = {
    "fieldA": "ALPH12345",
    "fieldB": "ALNT345346",
    "fieldC": "2015353423",
    "fieldD": "2332124343",
    "arrayField1": [
        {
            "arrVal1": "625347",
            "arrVal2": "example1"
        },
        {
            "arrVal1": "634441",
            "arrVal2": "example2"
        }
    ],
    "arrayField2": [
        {
            "arrVal1": "625347",
            "arrVal2": "example1"
        },
        {
            "arrVal1": "634441",
            "arrVal2": "example2"
        }
    ]
};

console.log(transform(obj));

function transform(obj) {
    var singleLevel = {};
    var multiLevelArr = [];
    for(var key in obj) {
        var value = obj[key];
        if(typeof value != "object") {
            singleLevel[key] = value;
        } else {
            multiLevelArr = multiLevelArr.concat(value);
        }
    }

    for(var x in multiLevelArr) {
        for(var y in singleLevel) {
            multiLevelArr[x][y] = singleLevel[y];
        }
    }

    return multiLevelArr;
}

Click the link below to test your code:

https://fiddle.jshell.net/06zfn55L/2/

Answer 3

Answer №2

Consider trying something similar:

check it out here

let newData = [];
data.arrayfield1.forEach(function(entry) {
    let keys = Object.keys(data);
    let obj = {};
    keys.forEach(function(key){
        if(Object.prototype.toString.call(data[key]) !== '[object Array]') {
            obj[key] = data[key];
        }
        let subkeys = Object.keys(entry);
        subkeys.forEach(function(subkey){
            obj[subkey] = entry[subkey];
        });
    });
    newData.push(obj);
});

Answer 4

Consider trying something similar:

check it out here

let newData = [];
data.arrayfield1.forEach(function(entry) {
    let keys = Object.keys(data);
    let obj = {};
    keys.forEach(function(key){
        if(Object.prototype.toString.call(data[key]) !== '[object Array]') {
            obj[key] = data[key];
        }
        let subkeys = Object.keys(entry);
        subkeys.forEach(function(subkey){
            obj[subkey] = entry[subkey];
        });
    });
    newData.push(obj);
});

Answer 5

Answer №3

Consider trying out Array.prototype.map(), for in loops, and Array.prototype.forEach()

let data = {
    "field1": "ABCD12345",
    "field2": "EFGH67890",
    "field3": "9876543210",
    "field4": "1357975315",
    "arrayfield1": [
        {
            "arr1": "246813579",
            "arr2": "qwerty"
        },
        {
            "arr1": "975318642",
            "arr2": "asdfgh"
        }
    ]
};

let result = data.arrayfield1.map(function(value, key) {
 let object = {};
 for (let index in data) {
  if (!Array.isArray(data[index])) {
   object[index] = data[index]
  }
 }
  let names = Object.keys(value);
  names.forEach(function(val, idx) {
    object[names[idx]] = value[val]
  })
 return object
});
 
console.log(JSON.stringify(result, null, 2))

Answer 6

Consider trying out Array.prototype.map(), for in loops, and Array.prototype.forEach()

let data = {
    "field1": "ABCD12345",
    "field2": "EFGH67890",
    "field3": "9876543210",
    "field4": "1357975315",
    "arrayfield1": [
        {
            "arr1": "246813579",
            "arr2": "qwerty"
        },
        {
            "arr1": "975318642",
            "arr2": "asdfgh"
        }
    ]
};

let result = data.arrayfield1.map(function(value, key) {
 let object = {};
 for (let index in data) {
  if (!Array.isArray(data[index])) {
   object[index] = data[index]
  }
 }
  let names = Object.keys(value);
  names.forEach(function(val, idx) {
    object[names[idx]] = value[val]
  })
 return object
});
 
console.log(JSON.stringify(result, null, 2))

Answer 7

Answer №4

Give this a shot :-

let data = {
    "name": "John Doe",
    "age": 25,
    "city": "New York",
    "phone": "555-555-5555",
    "pets": [
        {
            "type": "dog",
            "name": "Rex"
        },
        {
            "type": "cat",
            "name": "Whiskers"
        }
    ]
};



let modifiedData = [];

if(data.hasOwnProperty('pets')) {
    data.pets.forEach(function(pet){
        let newData = JSON.parse(JSON.stringify(data));
        delete newData.pets;
        for(prop in pet) {
            newData[prop] = pet[prop];
        }
        modifiedData.push(newData);
    });
}   

console.log(modifiedData);

Answer 8

Give this a shot :-

let data = {
    "name": "John Doe",
    "age": 25,
    "city": "New York",
    "phone": "555-555-5555",
    "pets": [
        {
            "type": "dog",
            "name": "Rex"
        },
        {
            "type": "cat",
            "name": "Whiskers"
        }
    ]
};



let modifiedData = [];

if(data.hasOwnProperty('pets')) {
    data.pets.forEach(function(pet){
        let newData = JSON.parse(JSON.stringify(data));
        delete newData.pets;
        for(prop in pet) {
            newData[prop] = pet[prop];
        }
        modifiedData.push(newData);
    });
}   

console.log(modifiedData);

How can I use JSON path to extract all the elements within an array from a JSON input?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Looking for a way to assign customized thumbnails to images in react-responsive-carousel and react-image-magnifiers?

Utilize Autocomplete component from Material UI to sift through distinct option values

Can you explain the functionality of isolate scope in angularjs?

Images in Android webview disappearing after first load

Techniques for converting a variable into an array in vue.js

Struggling to transfer JSON data between Python and PHP?

Using a combination of JQuery, HTML, and CSS, create a unique set of random colors for each box simultaneously

Assigning administrator privileges with connect-roles and Passport.JS

Why won't my div tag show conditionally with AngularJS ng-show?

Setting innerHTML does not affect the content of an SVG element

Having trouble retrieving the URL from JSON data - every time I attempt to access it, it just shows as undefined. Any suggestions

Once the form has been submitted, proceed to open a new page following processing

Send a variable to a background script and access it in various functions across tabs without relying on the storage API

Uncovering the JavaScript Linked to a Specific Element

Unraveling Nested JSON into Nested Structs with Golang

Utilizing AJAX to load a WAV file

My function handler is not being triggered when using React's onClientClick

Definition of TypeScript type representing the value of a key within an object

What is the best way to ensure that my image completely occupies the div?

Converting a Multidimensional Array into JSON Using ServiceStack