change JSON response in javascript

Question

I am working on WEB API's, I have received the JSON response from server, NOW I want to change the returned response into different JSON's to show different table and graphs.

this is the response from server

{"data":[{"id":3663101,"lstImeis":[{"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"},{"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}]}

and I need to convert this response to look like this :

{"data":[{"id":3663101,"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0","number2":789},{"id":3663101,"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0","number2":789},{"id":3665337,"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0","number2":456},{"id":3665337,"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0","number2":456},{"id":3665337,"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0","number2":456}]}

this is what I have done so far,

var data = new Array();
var str = '{"data":[{"id":3663101,"lstImeis":[{"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"},{"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}]}';
var response = JSON.parse(str);
var tableData = response.data;
var dataLength = response.data.length;

for (i = 0; i < dataLength; i++) {
    var obj = {};
    obj["id"] = tableData[i].id;
    for (a = 0; a < tableData[i].lstImeis.length; a++) {
        obj["number"] = tableData[i].lstImeis[a].number,
        obj["maxDate"] = tableData[i].lstImeis[a].maxDate,
        obj["minDate"] = tableData[i].lstImeis[a].minDate
    }
    obj["number2"] = tableData[i].number2;
    data.push(obj);
}
console.log(JSON.stringify(data));

Here is JSFIDDLE

Outer loops works fines but inner loop gives the last updated data, If you look at the given data and changed data, you will see the difference. Any idea, why its overriding the values in inner for loop and appending only last values into obj ?

Answer 1

Your logic is incorrect line

var obj = {};
obj["id"] = tableData[i].id;

should be inside the inner loop. also line

obj["number2"] = tableData[i].number2;
data.push(obj);

should be moved inside the inner loop. Here is the improved and working code https://jsfiddle.net/dmtfxt35/4/

var response = JSON.parse(str); 
var tableData = response.data;
var finalObj = {data:[]};
for (var i in tableData){
    for(var a in tableData[i].lstImeis){
    var tmpObj = {};
    tmpObj['id'] = tableData[i].id;
    tmpObj["number"] = tableData[i].lstImeis[a].number;
    tmpObj["maxDate"] = tableData[i].lstImeis[a].maxDate;
    tmpObj["minDate"] = tableData[i].lstImeis[a].minDate;
    tmpObj["number2"] = tableData[i].number2;
    finalObj.data.push(tmpObj);
  }
}
console.log(JSON.stringify(finalObj));

I hope this helped.

Answer 2

You using the same obj variable while inserting the data to array.

Obj is dict and it got updated on loop.

I have updated the code as per you requirement

 <script> var data = new Array(); var str = '{"msg":"success","code":"200","status":null,"data":[{"id":3663101,"lstImeis":[{"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"},{"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}],"draw":0,"limit":0,"recordsFiltered":0,"recordsTotal":0}'; var response = JSON.parse(str); var tableData = response.data; var dataLength = response.data.length; for(i = 0; i < dataLength; i++){ for(a = 0; a < tableData[i].lstImeis.length; a++){ var obj = {}; obj["id"] = tableData[i].id; obj["number"] = tableData[i].lstImeis[a].number; obj["maxDate"] = tableData[i].lstImeis[a].maxDate; obj["minDate"] = tableData[i].lstImeis[a].minDate; obj["number2"] = tableData[i].number2; data.push(obj); } } console.log(JSON.stringify(data)); </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

You can use array#reduce and array#map .

 var response = [{"id":3663101,"lstImeis":[{"number":"14370340908558","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"48717031235502","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"},{"number":"42540009239644","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}]; var result = response.reduce(function(res, obj) { var temp = obj.lstImeis.map(function(o) { return Object.assign({}, o, {id: obj.id, number2: obj.number2}); }); return res.concat(temp); },[]) var output = {data: result}; console.log(JSON.stringify(output)); 

Answer 4

Look at this Fiddle . You were pushing last updated obj data. You had to push obj each time you update it.

for(i = 0; i < dataLength; i++){    
  for(a = 0; a < tableData[i].lstImeis.length; a++){
    var obj = {};
    obj["id"] = tableData[i].id;
    obj["number"] = tableData[i].lstImeis[a].number;
    obj["maxDate"] = tableData[i].lstImeis[a].maxDate;
    obj["minDate"] = tableData[i].lstImeis[a].minDate;
    obj["number2"] = tableData[i].number2;
    data.push(obj);
   }      
}