Home > Software engineering >  Convert data from JSON file to JavaScript Array?
Convert data from JSON file to JavaScript Array?

Time:08-19

i am trying to convert the data from an JSON file which is looking like this:

        [
       {
          "name": "Michael",
          "age": "30",
          "brithday": "11/10/1989",
       
       }
]..... more data following

to an JavaScript looking something like this:

var myArray = [
    {'name':'Michael', 'age':'30', 'birthdate':'11/10/1989'},
    {'name':'Mila', 'age':'32', 'birthdate':'10/1/1989'},
    {'name':'Paul', 'age':'29', 'birthdate':'10/14/1990'},
    {'name':'Dennis', 'age':'25', 'birthdate':'11/29/1993'},
    {'name':'Tim', 'age':'27', 'birthdate':'3/12/1991'},
    {'name':'Erik', 'age':'24', 'birthdate':'10/31/1995'},
]

Do you guy have any idea on how to convert JSON data to this kind of array ?

CodePudding user response:

If you already have the file contents as a JavaScript string (which I assume based on your question), you can just use JSON.parse(). It will parse the JSON into an array of JavaScript objects as you want it.

Here's an example:

var text=`[
    {
        "name": "Michael",
        "age": "30",
        "birthday": "11/10/1989"
    },
    {
        "name": "Francine",
        "age": "38",
        "birthday": "03/12/1981"
    }
]`;

var textAsArray = JSON.parse(text);

console.log(textAsArray); // Will print the object array you asked for
console.log(textAsArray[1].age); // Will print 38

The console.log statements are there just to show you it's working.

If you need to rename birthday to birthdate, you can do it this way:

textArray.forEach(element => {
    element.birthdate = element.birthday;
    delete element.birthday; // Just "cleaning up"
})

CodePudding user response:

I got your problem, What you're facing in javascript, and with their objects also, and in my opinion, you have some of these approaches to converting data from JSON file to array,

Approach No.1-

  • First, you gonna do is to convert your JSON string to Javascript Array by using the JSON.parse() Method and take all of the values of that object and push it using a for loop.

  • with a code demonstration `

      var up = document.getElementById("GFG_UP");  
      var JS_Obj = 
      '{"prop_1":"val_1", "prop_2":"val_2", "prop_3" : "val_3"}';
    
      up.innerHTML = "JSON string - '"   JS_Obj   "'";
    
      var down = document.getElementById("GFG_DOWN");
    
      function myGFG() {
          var obj = JSON.parse(JS_Obj);
          var res = [];
    
          for(var i in obj)
              res.push(obj[i]);
    
          down.innerHTML = "Array of values - ["
                            res   "]";
      }
    

    `

Approach NO.2

  • This approach is also the same but uses a different method. Convert the JSON string to the JavaScript object using eval() method and then take out the values of the object and push them to the array using push() method.

  • Via code demonstration. ` var up = document.getElementById("GFG_UP");

      var JS_Obj = 
      '{"prop_1":"val_1", "prop_2":"val_2", "prop_3" : "val_3"}';
    
      up.innerHTML = "JSON string - '"   JS_Obj   "'";
    
      var down = document.getElementById("GFG_DOWN");
    
      function myGFG() {
          var obj = eval('('   JS_Obj   ')');
          var res = [];
    
          for(var i in obj)
              res.push(obj[i]);
    
          down.innerHTML = "Array of values - ["
                            res   "]";
      }
    

    `

Work with these approaches, It will solve your problem if you're working in HTML... But,

If you're working with frameworks then you will have to use the fs.readFile() and other file system algorithms in node.js.

here, you can learn about that - https://nodejs.dev/learn

That's all folks.

  • Related