如何在 Javascript 中重构嵌套的 JSON 对象

Question

I Am using Javascript to fetch JSON in this format:

[{
    "data": {
        "serialNumber": "12345678",
        "loopCount": 2,
        "temperature3": 22.74921781259558,
        "temperature2": 21.459065450414467,
        "temperature1": 25.60573959350586,
        "temperature7": 20.560272859443444,
        "temperature6": 24.672770566493245,
        "temperature5": 21.418451432003607,
        "temperature4": 24.136719323883636,
        "temperature8": 23.106006457744044
    },
    "deviceID": "12345678",
    "timestamp": "1514876959940"
}, {
    "data": {
        "loopCount": 3008,
        "serialNumber": "12345678",
        "temperature3": 24.340541769172475,
        "temperature2": 24.592980449259386,
        "temperature1": 25.208276748657227,
        "temperature7": 22.95620713734396,
        "temperature6": 24.173083663793975,
        "temperature5": 22.274865355495226,
        "temperature4": 23.507075904805543,
        "temperature8": 20.596809083024773
    },
    "deviceID": "12345678",
    "timestamp": "1514910791413"
}]

I would like to restructure the JSON object Using Javascript to look like this:

[{
    "loopCount": 3009,
    "serialNumber": "12345678",
    "temperature3": 20.938793894509594,
    "temperature2": 20.631314982104072,
    "temperature1": 25.192977905273438,
    "temperature7": 21.514532309261064,
    "temperature6": 24.03336173424463,
    "temperature5": 23.453609565992643,
    "temperature4": 24.424291668247513,
    "temperature8": 22.044323519108403,
    "timestamp": "1514910802296"
}, {
    "loopCount": 3009,
    "serialNumber": "12345678",
    "temperature3": 20.938793894509594,
    "temperature2": 20.631314982104072,
    "temperature1": 25.192977905273438,
    "temperature7": 21.514532309261064,
    "temperature6": 24.03336173424463,
    "temperature5": 23.453609565992643,
    "temperature4": 24.424291668247513,
    "temperature8": 22.044323519108403,
    "timestamp": "1514910802296"
}]

Currently, this is what I have:

 var myObj =[{ "data": { "serialNumber": "12345678", "loopCount": 2, "temperature3": 22.74921781259558, "temperature2": 21.459065450414467, "temperature1": 25.60573959350586, "temperature7": 20.560272859443444, "temperature6": 24.672770566493245, "temperature5": 21.418451432003607, "temperature4": 24.136719323883636, "temperature8": 23.106006457744044 }, "deviceID": "12345678", "timestamp": "1514876959940" }, { "data": { "loopCount": 3008, "serialNumber": "12345678", "temperature3": 24.340541769172475, "temperature2": 24.592980449259386, "temperature1": 25.208276748657227, "temperature7": 22.95620713734396, "temperature6": 24.173083663793975, "temperature5": 22.274865355495226, "temperature4": 23.507075904805543, "temperature8": 20.596809083024773 }, "deviceID": "12345678", "timestamp": "1514910791413" }, { "data": { "loopCount": 3009, "serialNumber": "12345678", "temperature3": 20.938793894509594, "temperature2": 20.631314982104072, "temperature1": 25.192977905273438, "temperature7": 21.514532309261064, "temperature6": 24.03336173424463, "temperature5": 23.453609565992643, "temperature4": 24.424291668247513, "temperature8": 22.044323519108403 }, "deviceID": "12345678", "timestamp": "1514910802296" }, { "data": { "loopCount": 3462, "serialNumber": "12345678", "temperature3": 20.927366751292798, "temperature2": 23.690258459678994, "temperature1": 24.851139068603516, "temperature7": 22.797037129771063, "temperature6": 24.46046332152272, "temperature5": 24.415112076761666, "temperature4": 21.217672372617155, "temperature8": 20.609864963787967 }, "deviceID": "12345678", "timestamp": "1514915728668" }] for (var key in myObj) { //document.getElementById("demo").innerHTML += myObj.length + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.serialNumber + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.loopCount + "<br>"; document.getElementById("demo").innerHTML += myObj[key].timestamp + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.temperature1 + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.temperature2 + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.temperature3 + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.temperature4 + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.temperature5 + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.temperature6 + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.temperature7 + "<br>"; document.getElementById("demo").innerHTML += myObj[key].data.temperature8 + "<br> <br>"; }

 <!DOCTYPE html> <html> <body> <p>How to access nested JSON objects.</p> <p id="demo"></p> </body> </html>

Answer 1

With ES7 you could use map and spread:

data.map(x => ({ ...x.data, timestamp: x.timestamp }))

ES6 Without the spread:

data.map(x => Object.assign({}, x.data, { timestamp: x.timestamp }))

Answer 2

I would like to restructure the JSON object Using Javascript to look like this.

You can use the function map .

 var array = [{ "data": { "serialNumber": "12345678", "loopCount": 2, "temperature3": 22.74921781259558, "temperature2": 21.459065450414467, "temperature1": 25.60573959350586, "temperature7": 20.560272859443444, "temperature6": 24.672770566493245, "temperature5": 21.418451432003607, "temperature4": 24.136719323883636, "temperature8": 23.106006457744044 }, "deviceID": "12345678", "timestamp": "1514876959940"}, { "data": { "loopCount": 3008, "serialNumber": "12345678", "temperature3": 24.340541769172475, "temperature2": 24.592980449259386, "temperature1": 25.208276748657227, "temperature7": 22.95620713734396, "temperature6": 24.173083663793975, "temperature5": 22.274865355495226, "temperature4": 23.507075904805543, "temperature8": 20.596809083024773 }, "deviceID": "12345678", "timestamp": "1514910791413"}]; var result = array.map((o) => ({...o.data, timestamp: o.timestamp})); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }