How to change the json response format in angular

Question

I am using Angular 2+ ,

The api json response is like below,

{
 data:[
   {name: "2020-04-28", value: "1", label: "current"}
   {name: "2020-04-28", value: "2", label: "target"}
   {name: "2020-04-29", value: "2", label: "current"}
   {name: "2020-04-29", value: "3", label: "target"}
   {name: "2020-04-30", value: "6", label: "current"}
   {name: "2020-04-30", value: "7", label: "target"}
 ]
}

I have to change above api responce format into,

  {
   data: [
    {
      name: "Current",
      value: [1, 2, 6]
    },
    {
      name: "Target",
      value: [2, 3, 7]
    }
  ]
 }

Can anybody help me to change the format of the json response and please give me the explanation for me to understand the code.

Does this answer your question? [How to change the format of an array using tyscript](https://stackoverflow.com/questions/61776866/how-to-change-the-format-of-an-array-using-tyscript) — Liam, May 13 '20 at 14:32

Dusayanta Prasad · Accepted Answer · 2020-04-28T10:02:54.893

It might be naive and non-optimized approach, but it works.

const data = {
    data:[
      {name: "2020-04-28", value: "1", label: "current"},
      {name: "2020-04-28", value: "2", label: "target"},
      {name: "2020-04-29", value: "2", label: "current"},
      {name: "2020-04-29", value: "3", label: "target"},
      {name: "2020-04-30", value: "6", label: "current"},
      {name: "2020-04-30", value: "7", label: "target"}
    ]
   };

let newData = []
data.data.forEach(e => {
    if(newData.length == 0){
        newData.push({
            name: e.label,
            value: [e.value]
        });
    } else {
        let foundIndex = newData.findIndex(fi => fi.name === e.label);
        if(foundIndex >= 0){
            newData[foundIndex].value.push(e.value);
        } else{
            newData.push({
                name: e.label,
                value: [e.value]
            });
        }
        
    }
});
console.log(newData);

score 0 · Answer 2 · answered Apr 28 '20 at 09:15

Try to do something like this.

first install lodash then you can use this code.

let data = {
 data:[
   {name: "2020-04-28", value: "1", label: "current"},
   {name: "2020-04-28", value: "2", label: "target"},
   {name: "2020-04-29", value: "2", label: "current"},
   {name: "2020-04-29", value: "3", label: "target"},
   {name: "2020-04-30", value: "6", label: "current"},
   {name: "2020-04-30", value: "7", label: "target"}
 ]
}

let dataGroup = _.groupBy(data.data, "label")
let loopNo = Object.keys(_.groupBy(data.data, "label"))
console.log("a", loopNo)
let formatedDate = []
for(let i in loopNo) {
    formatedDate.push({
        "name": i,
        "value": datagroup[i]
    })
}

score 0 · Answer 3 · answered Apr 28 '20 at 09:17

var data = {
 data:[
   {name: "2020-04-28", value: "1", label: "current"},
   {name: "2020-04-28", value: "2", label: "target"},
   {name: "2020-04-29", value: "2", label: "current"},
   {name: "2020-04-29", value: "3", label: "target"},
   {name: "2020-04-30", value: "6", label: "current"},
   {name: "2020-04-30", value: "7", label: "target"}
 ]
}

var storeArray = []
var filterData = [];
data.data.forEach(each=>{
    if(!storeArray.includes(each.label)) {
        storeArray.push(each.label);
        filterData.push({
            name: each.label,
            value: [each.value]
        });
    } else {
        filterData[storeArray.indexOf(each.label)].value.push(each.value);
    }
})

console.log(filterData)

Can you please check once whether it is what you are looking for or not?

score 0 · Answer 4 · edited Apr 28 '20 at 09:51

let x = {
    data: [
        { name: "2020-04-28", value: "1", label: "current" },
        { name: "2020-04-28", value: "2", label: "target" },
        { name: "2020-04-29", value: "2", label: "current" },
        { name: "2020-04-29", value: "3", label: "target" },
        { name: "2020-04-30", value: "6", label: "current" },
        { name: "2020-04-30", value: "7", label: "target" },
        { name: "2020-04-30", value: "8", label: "target" },
        { name: "2020-04-30", value: "9", label: "get" }

    ]
};

let obj = {
    data: []
};

function setCharAt(str, index, chr) {
    if (index > str.length - 1) return str;
    return str.substr(0, index) + chr + str.substr(index + 1);
}


x.data.forEach((item) => {
    let index = obj.data.findIndex((di) => { return di.name === setCharAt(item.label, 0, item.label.charAt(0).toUpperCase()) });
    if (index > -1) {
        obj.data[index].value.push(item.value);
    } else {
        obj.data.push({
            name: setCharAt(item.label, 0, item.label.charAt(0).toUpperCase()),
            value: [item.value]
        });
    }
});

console.log(JSON.stringify(obj));

Native JS

let x = {
    data: [
        { name: "2020-04-28", value: "1", label: "current" },
        { name: "2020-04-28", value: "2", label: "target" },
        { name: "2020-04-29", value: "2", label: "current" },
        { name: "2020-04-29", value: "3", label: "target" },
        { name: "2020-04-30", value: "6", label: "current" },
        { name: "2020-04-30", value: "7", label: "target" },
        { name: "2020-04-30", value: "8", label: "target" },
        { name: "2020-04-30", value: "9", label: "get" }

    ]
};

let obj = {
    data: []
};

function setCharAt(str, index, chr) {
    if (index > str.length - 1) return str;
    return str.substr(0, index) + chr + str.substr(index + 1);
}


x.data.forEach((item) => {
    let index = obj.data.findIndex((di) => { return di.name === setCharAt(item.label, 0, item.label.charAt(0).toUpperCase()) });
    if (index > -1) {
        obj.data[index].value.push(item.value);
    } else {
        obj.data.push({
            name: setCharAt(item.label, 0, item.label.charAt(0).toUpperCase()),
            value: [item.value]
        });
    }
});

console.log(JSON.stringify(obj));

score 0 · Answer 5 · edited Oct 27 '20 at 22:59

0

Use JSON.parse as shown below.

var txt = '{"name":"John", "age":30, "city":"New York"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;

edited Oct 27 '20 at 22:59

Ayan Sengupta

5,238
2
28
40

answered Oct 27 '20 at 21:27

Sambu Praveen

11
1

How to change the json response format in angular

5 Answers5

Linked