DEV Community

Cover image for How to make CRUD operations in JSON
Camilo Martinez
Camilo Martinez

Posted on • Updated on

How to make CRUD operations in JSON


Before starting with CRUD operations, recommend learn about:


CRUD operations are things that you going to make all your life as a programmer.

With JSON can use a clever data structure to avoid brute force search with for loops. Using the "character" name as "Primary Key".

Game of Thrones Example

Data

  var got = {
    "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"},
    "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"},
    "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"}
  }
Enter fullscreen mode Exit fullscreen mode

Add character (Create):

// hidden setup JavaScript code goes in this preamble area var got = { "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} } // Click [RUN] button to see result var characterObject = { "name": "Bella Ramsey", "gender": "Female", "house": "Mormonts" }; var character = "Lyanna"; got[character] = characterObject; console.log(got)

Find character (Read):

// hidden setup JavaScript code goes in this preamble area var got = { "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} } // Click [RUN] button to see result var character = "Tyrion"; // Or whatever var result = got[character]; console.log(result) console.log(result.name) console.log(result.gender) console.log(result.house)

Update character (Update):

// hidden setup JavaScript code goes in this preamble area var got = { "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} } // Click [RUN] button to see result var character = "Jon Snow"; got[character].house = "Targaryens" var result = got[character]; console.log(result)

Remove Character (Delete):

// hidden setup JavaScript code goes in this preamble area var got = { "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} } // Click [RUN] button to see result var character = "Tyrion"; delete got[character]; console.log(got)

Alternative Structure

Maybe it's a little good looking, but you need to deal with array of positions on CRUD operations.

// hidden setup JavaScript code goes in this preamble area //Data var got = { "index": { "Jon Snow": 0, "Daenerys": 1, "Tyrion": 2 }, "data": [ {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} ] } var character = "Daenerys"; var index = got.index[character]; var data = got.data[index]; console.log(data);

That’s All Folks!
Happy Coding 🖖

ko-fi

Discussion (7)

Collapse
gdahboy profile image
gdahboy

hhh i like it really ... thank you

Collapse
diegonvs profile image
Diego Nascimento • Edited on

Hey Camilo, instead of using delete, you could set the pointer to null. #perfTip :p

Collapse
equiman profile image
Camilo Martinez Author

Sorry I'm lost, could you please write the example code?

Collapse
diegonvs profile image
Diego Nascimento

On delete operation you can use got[character] = null; instead of delete got[character];. Take a look on jsperf.com/delete-vs-undefined-vs-...

Thread Thread
equiman profile image
Camilo Martinez Author • Edited on

Not works as CRU*D* operation, because the 'character' is not removed, just the values are replaced by null.

I tested changing on Delete script. When run the script show: Tyrion: null.

Can be used if you want leave the character, but remove his data.

Nice link BTW. I did not know about the performance comparison between null and delete

Collapse
thulasiram_ponnam_8d5e32b profile image
Info Comment hidden by post author - thread only accessible via permalink
!2C RAM @ jsonformatter.dev • Edited on

try & instantly validate and Beautify JSON using jsonformatter.dev

Before

{
"Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"},
"Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"},
"Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"}
}

After

{
  "Jon Snow": {
    "name": "Kit Harington",
    "gender": "Male",
    "house": "Starks"
  },
  "Daenerys": {
    "name": "Emilia Clarke",
    "gender": "Female",
    "house": "Targaryens"
  },
  "Tyrion": {
    "name": "Peter Dinklage",
    "gender": "Male",
    "house": "Lanisters"
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
thulasiram_ponnam_8d5e32b profile image
Info Comment hidden by post author - thread only accessible via permalink
!2C RAM @ jsonformatter.dev

try & instantly validate and Beautify JSON using jsonformatter.dev

Some comments have been hidden by the post's author - find out more