Home > front end >  Updating JSON structure based on id
Updating JSON structure based on id

Time:04-04

I was trying to update the town name in the below-given JSON structure.


    "City":[
   {
      "Name":"Delhi",
      "id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd",
      "Towns":[
         {
            "Name":"MG Colony",
            "conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1a4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
         },
         {
            "Name":"DLF Colony",
            "conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1a4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
         }
      ]
   },
   {
      "Name":"Pune",
      "id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax",
      "Towns":[
         {
            "Name":"Hadapsar",
            "conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1x4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax"
         },
         {
            "Name":"Magarpatta",
            "conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1f4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bax"
         }
      ]
   }
]

I wanted to change the town name from "Hapdasar" to "Viman Nagar" if my cid matches that of Hadapsar Town

Output which I wanted was:


   "City":[
   {
      "Name":"Delhi",
      "id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd",
      "Towns":[
         {
            "Name":"MG Colony",
            "conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1a4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
         },
         {
            "Name":"DLF Colony",
            "conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1a4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
         }
      ]
   },
   {
      "Name":"Pune",
      "id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax",
      "Towns":[
         {
            "Name":"Viman Nagar",
            "conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1x4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax"
         },
         {
            "Name":"Magarpatta",
            "conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1f4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bax"
         }
      ]
   }
]

I was using js map to iterate but was confused about how to replicate the exact structure.

CodePudding user response:

Well, map alone is not enough to solve your problem, since you have two nested arrays. Maybe you can consider the possibility to use maptwice? For example:

var cid = "c5d58bef-f1c2-4b7c-a6d7-f64df12321ax";
var newName = "Viman Nagar";
City = City.map(function(city) {
  city.towns = city.towns.map(function(town) {
    if (town.cid === cid)
      town.name = newName;
    return town;
  });
  return city;
});

CodePudding user response:

Atribute your object for

let cities = [{
    "Name": "Delhi"
     ...
}]

and then you can map over it

let result = cities.map(city => city.Towns.map(town => {
    if (town.Name === "Hadapsar") {
        return {
            ...town,
            Name: "Viman Nagar"
        }
    } else return town
}))

CodePudding user response:

Use Array#map as follows:

  • Iterate over cities
  • In every iteration, iterate over Towns. If current town's cid is equal to the one to change, update its Name

const changeTownName = (cities = [], cid, name) =>
  cities.map(({ Towns = [], ...props }) => ({
    ...props,
    Towns: Towns.map(town => town.cid === cid 
      ? { ...town, Name: name } 
      : { ...town }
    )
  }));

const cities = [
  { Name: 'Delhi', id: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321bd', Towns: [ { Name: "MG Colony", conditionId: '60d1f5eb-0222-4a84-879b-6699b0cfc1a4', cid: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321bd' }, { Name: "DLF Colony", conditionId: '60d1f5eb-0222-4a84-879b-7749b0cfc1a4', cid: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321bd' } ] },
  { Name: 'Pune', id: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321ax', Towns: [ { Name: "Hadapsar", conditionId: '60d1f5eb-0222-4a84-879b-6699b0cfc1x4', cid: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321ax' }, { Name: "Magarpatta", conditionId: '60d1f5eb-0222-4a84-879b-7749b0cfc1f4', cid: 'c5d58bef-f1c2-4b7c-a6d7-f64df12321bax' } ] }
];
console.log( changeTownName(cities, 'c5d58bef-f1c2-4b7c-a6d7-f64df12321ax', 'Viman Nagar') );

CodePudding user response:

If you consider city as cities this code can help you;

cities.forEach(city => {
    city.Towns = city.Towns.map(el => {
        if (el.Name === 'Hapdasar') {
            el.Name = 'Viman Nagar';
        }
        return el;
    })
});

CodePudding user response:

You'll need to loop for each city in your array, and each town in the city. If the cid matches the town's cid, then change it;

const myNewTownName = "Viman Nagar";
const cid = "c5d58bef-f1c2-4b7c-a6d7-f64df12321ax";
for(let i = 0; i < myObj.City.length; i  ){
    const city = myObj.City[i];
    for(let j = 0; j < city.Towns.length; j  ){
        const town = city.Towns[j];
        if(cid === town.cid){
            town.Name = myNewTownName;
        }
        city.town[j] = town;//Updates city with the updated town
    }
    myObj.City[i] = city; //Updates myObj with the updated city
}

CodePudding user response:

The result can also be obtained using nested .forEach loops to parsing through the outer and inner arrays, with an if block to examine the cid for the target town.

const data = {
"City":[
   {
      "Name":"Delhi",
      "id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd",
      "Towns":[
         {
            "Name":"MG Colony",
            "conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1a4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
         },
         {
            "Name":"DLF Colony",
            "conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1a4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bd"
         }
      ]
   },
   {
      "Name":"Pune",
      "id":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax",
      "Towns":[
         {
            "Name":"Hadapsar",
            "conditionId":"60d1f5eb-0222-4a84-879b-6699b0cfc1x4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321ax"
         },
         {
            "Name":"Magarpatta",
            "conditionId":"60d1f5eb-0222-4a84-879b-7749b0cfc1f4",
            "cid":"c5d58bef-f1c2-4b7c-a6d7-f64df12321bax"
         }
      ]
   }
]

} // end data;


const targetCid = "c5d58bef-f1c2-4b7c-a6d7-f64df12321ax"; // cid for Hadapsar;

const objArray = data.City;

objArray.forEach(element => {
  
  element.Towns.forEach(element => {  
  
    if (element.cid == targetCid) {
      element.Name = "Viman Nagar";
    } // end if;
  
  }); // next object in Towns array;

});  // next object in objArray;
  


document.getElementById('output').textContent = JSON.stringify(data, undefined, 2);
#output {
 white-space: pre;
}
<pre id="output"></pre>

  • Related