Home > Mobile >  Type script- React native : How to modify json response?
Type script- React native : How to modify json response?

Time:11-27

What is the correct way to modify json response , My goal is to display all the MaintroomName belonging to the same Plsectn

This is the function that needs to modify to get the same structure which I mentioned below that I am interested in reaching.

useEffect(() => {
    BtpBridgeModule.loadDataFromSdk(
      'GushSet',
      [],
      { PlantID: userData.plant, LocationID: userData.LocationID },
      undefined,
      0,
    ).then(function (dataResolved) {
      let aResults = JSON.parse(dataResolved).value;
    });
  }, [userData.LocationID, userData.plant]);

The json look like this :

[
   {
      "Maintroom":"221",
      "MaintroomName":"gogi",
      "Plsectn":"22",
      "PlsectnName":"pardehan"
   },
   {
      "Maintroom":"222",
      "MaintroomName":"nahaleymenash",
      "Plsectn":"22",
      "PlsectnName":"pardehan"
   },
{
     
      "Maintroom":"231",
      "MaintroomName":"gvul",
      "Plsectn":"23",
      "PlsectnName":"meshulash"
   },
   {
     
      "Maintroom":"232",
      "MaintroomName":"daro",
      "Plsectn":"23",
      "PlsectnName":"meshulash"
   },
]

I wanna change it to this structure :

[
    {
      title: PlsectnName,
      checked: false,
      data: [
        { key: MaintroomName, value: false, checked: false },
        { key: MaintroomName, value: false, checked: false },
        { key: MaintroomName, value: false, checked: false },
        { key: MaintroomName, value: false, checked: false },
      ],
    },
    {
      title: PlsectnName,
      checked: false,
      data: [
        { key: MaintroomName, value: false, checked: false },
        { key: MaintroomName, value: false, checked: false },
        { key: MaintroomName, value: false, checked: false },
      ],
    },
]

Note - each Plsectn can have a dynamic number of MaintroomName.

CodePudding user response:

Algorithm to sort your data

// Your response data
const data = [
   {
      "Maintroom":"221",
      "MaintroomName":"gogi",
      "Plsectn":"22",
      "PlsectnName":"pardehan"
   },
   {
      "Maintroom":"222",
      "MaintroomName":"nahaleymenash",
      "Plsectn":"22",
      "PlsectnName":"pardehan"
   },
   {
     
      "Maintroom":"231",
      "MaintroomName":"gvul",
      "Plsectn":"23",
      "PlsectnName":"meshulash"
   },
   {
     
      "Maintroom":"232",
      "MaintroomName":"daro",
      "Plsectn":"23",
      "PlsectnName":"meshulash"
   },
];

// Variable to track duplicate keys (PlsectnName)
let keys = [];

// Result after sorting the data
let result = [];

// Algorithm to sort the data
data.forEach((obj) => {
  if(!keys.includes(obj.PlsectnName)){
    result.push({
      title: obj.PlsectnName,
      checked: false,
      data: [
        { key: obj.MaintroomName, value: obj.Maintroom, checked: false }
      ]
    });
    keys.push(obj.PlsectnName);
  }
  
  else {
    result.forEach((subObj,index) => {
      if(subObj.title == obj.PlsectnName){
        subObj.data = [...subObj.data, { key: obj.MaintroomName, value: obj.Maintroom, checked: false }]
        result[index] = subObj;
      }
    });
  }
})

// Log the result
console.log(result)

(Note: If you want to set the value as false then change value: obj.Maintroom to value: false)



Implementing the Algorithm in your useEffect function.

// Algorithm as function to sort your data
const sortData = (data) => {
    // Variable to track duplicate keys (PlsectnName)
    let keys = [];

    // Result after sorting the data
    let result = [];

    // Algorithm to sort the data
    data.forEach((obj) => {
        if(!keys.includes(obj.PlsectnName)){
            result.push({
                title: obj.PlsectnName,
                checked: false,
                data: [
                    { key: obj.MaintroomName, value: obj.Maintroom, checked: false }
                ]
            });
            keys.push(obj.PlsectnName);
        }
  
        else {
            result.forEach((subObj,index) => {
                if(subObj.title == obj.PlsectnName){
                    subObj.data = [...subObj.data, { key: obj.MaintroomName, value: obj.Maintroom, checked: false }]
                    result[index] = subObj;
                }
            });
        }
    })

    // return the result
    return result;
}

// Your function
useEffect(() => {
    BtpBridgeModule.loadDataFromSdk(
        'GushSet',
        [],
        { PlantID: userData.plant, LocationID: userData.LocationID },
        undefined,
        0,
    ).then(function (dataResolved) {
        let aResults = JSON.parse(dataResolved).value;
        // Added code
        let sortedResult = sortData(aResults)
        // Here sortedResult is your final data
    });
}, [userData.LocationID, userData.plant]);
  • Related