What is the best way to generate a fresh object using an existing object in Javascript?

Question

What is the best way to generate a fresh object using an existing object in Javascript?

Struggling with generating a new object from the response obtained from an ajax call in JavaScript app.

The data received is an array of objects, shown below:

{
  "items": [
    {
      "id": "02egnc0eo7qk53e9nh7igq6d48",
      "summary": "Learn to swim",
      "start": {
        "dateTime": "2017-03-04T19:00:00+05:30"
      }
    }        

]
}

However, my component requires JS Object in this format:

{
id: "e1",
title: "Express",
start: "Jan 13, 2010",
description: "Jan 13, 2010"
}

Wondering if the current approach is correct, open to better suggestions

var content = {
    "items": [{
        "id": "02egnc0eo7qk53e9nh7igq6d48",
        "summary": "Learn to code",
        "start": {
          "dateTime": "2017-03-04T19:00:00+05:30"
        }
      }
      }
    };
    var gcalEvents = {};
    var jsonObj = {
      "id": "e1",
      "title": "Oracle Application Express",
      "start": "Jan 13, 2010",
      "description": "Jan 13, 2010"
    };

    console.log(content.items.length);
    for (var index = 0; index < content.items.length; index++) {
      var obj = content.items;
      console.log(obj);

      jsonObj.id = obj[index]["id"];
      jsonObj.title = obj[index].summary;
      jsonObj.start = obj[index].start.dateTime;
      jsonObj.description = "";
      console.log(jsonObj);
      gcalEvents[index] = jsonObj;
    }
    console.log(gcalEvents);

javascript json

Answer 1

Answer №1

If you want to adopt a more functional approach, consider the code snippet below:

var processed = data.records.map(function (record) {
    return {
        id: record.id,
        name: record.title,
        timestamp: record.timestamp
    }
})

This code snippet utilizes the map method which iterates over each item in an array and generates a new array containing modified objects.

For a more comprehensive example, check out this detailed demo.

Answer 2

If you want to adopt a more functional approach, consider the code snippet below:

var processed = data.records.map(function (record) {
    return {
        id: record.id,
        name: record.title,
        timestamp: record.timestamp
    }
})

This code snippet utilizes the map method which iterates over each item in an array and generates a new array containing modified objects.

For a more comprehensive example, check out this detailed demo.

Answer 3

Answer №2

I have figured out another method to transform this data with ease. Utilizing Underscore.js for better code readability. Here's an illustration:

var content = {
    "items": [{
        "id": "02egnc0eo7qk53e9nh7igq6d48",
        "summary": "Learn to code",
        "start": {
            "dateTime": "2017-03-04T19:00:00+05:30"
        }
    }, {
        "id": "nj4h567r617n4vd4kq98qfjrek",
        "summary": "Modern Data Architectures for Business Insights at Scale Confirmation",
        "start": {
            "dateTime": "2017-03-07T11:30:00+05:30"
        }
    }]
};
var result = _.map(content.items, function(item) {
    return {
        id: item.id,
        title: item.summary,
        start: item.start.dateTime,
        description: ""
    };
});
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

The outcome is as shown below:

[
  {
    "id": "02egnc0eo7qk53e9nh7igq6d48",
    "title": "Learn to code",
    "start": "2017-03-04T19:00:00+05:30",
    "description": ""
  },
  {
    "id": "nj4h567r617n4vd4kq98qfjrek",
    "title": "Modern Data Architectures for Business Insights at Scale Confirmation",
    "start": "2017-03-07T11:30:00+05:30",
    "description": ""
  }
]

Answer 4

I have figured out another method to transform this data with ease. Utilizing Underscore.js for better code readability. Here's an illustration:

var content = {
    "items": [{
        "id": "02egnc0eo7qk53e9nh7igq6d48",
        "summary": "Learn to code",
        "start": {
            "dateTime": "2017-03-04T19:00:00+05:30"
        }
    }, {
        "id": "nj4h567r617n4vd4kq98qfjrek",
        "summary": "Modern Data Architectures for Business Insights at Scale Confirmation",
        "start": {
            "dateTime": "2017-03-07T11:30:00+05:30"
        }
    }]
};
var result = _.map(content.items, function(item) {
    return {
        id: item.id,
        title: item.summary,
        start: item.start.dateTime,
        description: ""
    };
});
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

The outcome is as shown below:

[
  {
    "id": "02egnc0eo7qk53e9nh7igq6d48",
    "title": "Learn to code",
    "start": "2017-03-04T19:00:00+05:30",
    "description": ""
  },
  {
    "id": "nj4h567r617n4vd4kq98qfjrek",
    "title": "Modern Data Architectures for Business Insights at Scale Confirmation",
    "start": "2017-03-07T11:30:00+05:30",
    "description": ""
  }
]

Answer 5

Answer №3

Essentially, your goal is to transform data from one set to another. The mapping function in JavaScript can be a powerful tool for this task. For example:

var data = {
  "elements": [{
    "id": "02egnc0eo7qk53e9nh7igq6d48",
    "name": "Master JavaScript",
    "date": {
      "dateTime": "2017-03-04T19:00:00+05:30"
    }
  }]
};

var newData = data.elements.map(function (element) {
  return {
    id: element.id,
    title: element.name,
    dateTime: element.date.dateTime,
    description: ""
  };
});

console.log(newData);

Answer 6

Essentially, your goal is to transform data from one set to another. The mapping function in JavaScript can be a powerful tool for this task. For example:

var data = {
  "elements": [{
    "id": "02egnc0eo7qk53e9nh7igq6d48",
    "name": "Master JavaScript",
    "date": {
      "dateTime": "2017-03-04T19:00:00+05:30"
    }
  }]
};

var newData = data.elements.map(function (element) {
  return {
    id: element.id,
    title: element.name,
    dateTime: element.date.dateTime,
    description: ""
  };
});

console.log(newData);

Answer 7

Answer №4

let dataObj = [];
for (let i = 0; i < itemsList.length; i++) {
  let item = {};
  console.log(item);
  item["id"] = itemsList[i].id;
  item["title"] = itemsList[i].summary;
  item["start"] = itemsList[i].start.dateTime;
  item["description"] = "";
  dataObj.push(item);
  console.log(dataObj);
  //calendarEvents[i] = dataObj;
}

This code snippet generates the desired json object named dataObj.

I hope you find this information helpful :)

Answer 8

let dataObj = [];
for (let i = 0; i < itemsList.length; i++) {
  let item = {};
  console.log(item);
  item["id"] = itemsList[i].id;
  item["title"] = itemsList[i].summary;
  item["start"] = itemsList[i].start.dateTime;
  item["description"] = "";
  dataObj.push(item);
  console.log(dataObj);
  //calendarEvents[i] = dataObj;
}

This code snippet generates the desired json object named dataObj.

I hope you find this information helpful :)

Answer 9

Answer №5

After making the necessary corrections, here is the updated code snippet: One issue was identified when listing the content items - a "]" was missing at the end. Another mistake was attempting to assign values to an undefined object. To resolve this, it is crucial to first define the object eg: jsonObj = {};, and then proceed with assigning the values. Personally, I find it more efficient to define the object and assign values in one go.

To ensure that the output is in array format, simply define the collection as an array rather than an object eg: var gcalEvents = []

var content = {
  "items": [
    {
      "id": "02egnc0eo7qk53e9nh7igq6d48",
      "summary": "Learn to code",
      "start": {
        "dateTime": "2017-03-04T19:00:00+05:30"
      }
    },
    {
      "id": "nj4h567r617n4vd4kq98qfjrek",
      "summary": "Modern Data Architectures for Business Insights at Scale Confirmation",
      "start": {
        "dateTime": "2017-03-07T11:30:00+05:30"
      }
    }
  ]
};
              var gcalEvents = [];
                var jsonObj = {
                    "id": "e1",
                    "title": "Oracle Application Express",
                    "start": "Jan 13, 2010",
                    "description": "Jan 13, 2010"
                };
                
                //console.log(content.items.length);
                for(var index=0; index < content.items.length; index++){                    
                    var obj = content.items[index];
                    //console.log(obj);
                    
                    jsonObj = {
                      'id': obj["id"],
                      'title': obj.summary,
                      'start': obj.start.dateTime,
                      'description': ""   
                    }
                    //console.log(jsonObj);
                    gcalEvents[index] = jsonObj;
                }
                console.log(gcalEvents);

Answer 10

After making the necessary corrections, here is the updated code snippet: One issue was identified when listing the content items - a "]" was missing at the end. Another mistake was attempting to assign values to an undefined object. To resolve this, it is crucial to first define the object eg: jsonObj = {};, and then proceed with assigning the values. Personally, I find it more efficient to define the object and assign values in one go.

To ensure that the output is in array format, simply define the collection as an array rather than an object eg: var gcalEvents = []

var content = {
  "items": [
    {
      "id": "02egnc0eo7qk53e9nh7igq6d48",
      "summary": "Learn to code",
      "start": {
        "dateTime": "2017-03-04T19:00:00+05:30"
      }
    },
    {
      "id": "nj4h567r617n4vd4kq98qfjrek",
      "summary": "Modern Data Architectures for Business Insights at Scale Confirmation",
      "start": {
        "dateTime": "2017-03-07T11:30:00+05:30"
      }
    }
  ]
};
              var gcalEvents = [];
                var jsonObj = {
                    "id": "e1",
                    "title": "Oracle Application Express",
                    "start": "Jan 13, 2010",
                    "description": "Jan 13, 2010"
                };
                
                //console.log(content.items.length);
                for(var index=0; index < content.items.length; index++){                    
                    var obj = content.items[index];
                    //console.log(obj);
                    
                    jsonObj = {
                      'id': obj["id"],
                      'title': obj.summary,
                      'start': obj.start.dateTime,
                      'description': ""   
                    }
                    //console.log(jsonObj);
                    gcalEvents[index] = jsonObj;
                }
                console.log(gcalEvents);

What is the best way to generate a fresh object using an existing object in Javascript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Leverage the package.json script without relying on any yarn/npm commands

Generating a dynamic JSON tree from a database using Java

Incorporate the xml2js JavaScript library with Angular 2 for enhanced functionality

Enhancing Efficiency and Optimization with jQuery

Unable to locate properties "offsetHeight" or "clientHeight" within a React/Next.js project developed in TypeScript

The "self" variable in the Node.js prototype object fails to retain the correct context for the callback function

Tips for keeping a JSON file intact while transitioning from localhost to a server

What might be causing my mongoose query to take so long? (~30 seconds)

When making an Ajax request to a controller, rather than simply returning JSON data, it redirects you to a

What is the best way to interpret this JSON data?

Using classic ASP to populate a JavaScript array from a VBScript drop-down menu

Is there a way to remove a dynamically rendered component from a list?

Trigger an Event Handler only after ensuring the completion of the previous event handling

There was an issue with the origin null not being permitted by Access-Control-Allow-Origin

What could be the reason for the malfunctioning transition effect in my slider animation?

How can I pass standard HTML as a component in React?

Refresh Angular controller after ng-click event is triggered

FullCalendar Not Responding to JSON Parsing

Securing the connection between clients and servers through encryption

Perform the action: insert a new item into an array belonging to a model