Create a JSON array from a collection using Backbone.js

I have a collection called Platforms in my backbone framework. The structure of this Platforms collection is organized as follows:

Platforms
  PlatformList
    models
      0: Platform
        attributes
          id: 1
          name: "some name"
      1: Platform
        attributes
          id: 2
          name: "some other name"

My goal is to extract the attributes from each model within the collection and create a JSON array that looks like this:

[{"id":1,"name":"some name"},{"id":2,"name":"some other name"}]

When I tried using Platforms.models.toJSON() or JSON.stringify(Platforms.models), I ended up with a literal string output of

"[[object Object], [object Object]]"

How can I generate the specific JSON array format that I require from this collection?

Answer №1

A better approach would be to avoid using platforms.models.toJSON() and instead call toJSON directly on the collection!

Platforms.toJSON()

For more information, you can refer to this example on jsfiddle: http://jsfiddle.net/saelfaer/TP9NE/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Import data from a distant file into a node Buffer within the web browser

Currently, I am utilizing browserify to utilize this particular package within the browser. Specifically, I have developed a phonegap application that retrieves .fsc files from the server. The code snippet looks like this: var reader = new FileReader( ...

Creating a dynamic link in Vue JS is a cinch!

I currently have the following code snippet: <b-dropdown text="Select Factory" block variant="primary" class="m-2" menu-class="w-100"> <b-dropdown-item @click="selectedFactory='China'"> ...

Creating raw JavaScript from npm package:How to convert npm modules into plain

Is there a way to get a pre-compiled plain JavaScript file from the repository https://github.com/airbrake/airbrake-js? I'm looking for a solution without using bower, npm or any other tools - just a single JavaScript file. By the way: The file "http ...

I've noticed that my alert is not appearing when I click submit. Can someone please help me figure out what I could

I am having trouble getting my alert to display when the form is not validating. It should show an alert message if the form is valid but it's not working as expected. I've spent hours trying to fix this issue with no luck. I appreciate any help ...

Updating the JSON object wrapper name received from a WCF service method

In my WCF 3.5 application, I have created a method called TestMe with the following definition: [OperationContract] [WebInvoke(UriTemplate = "/Login", Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseForma ...

Discovering the size and count of JavaScript objects within a browser's memory

Many suggest using the Chrome Profiler Heap Snapshot to analyze memory usage, but I have found that on an empty page (no JavaScript or CSS, just HTML), it shows a heap size of 8MB and anywhere from 12 to 30 thousand objects depending on its mood. This tool ...

Node JS Client.query not returning expected results

Currently, I am developing a Web Application that interacts with my PostgreSQL database. However, when I navigate to the main page, it should display the first element from the 'actor' table, but unfortunately, nothing is being retrieved. Below i ...

Displaying various elements with distinct properties in React using ES6

<---------------------MODIFICATION------------------------> I initially thought I needed multiple onChange functions, but after reviewing the answers provided, I discovered a solution thanks to the helpful user's response. With some experimenta ...

Is there a way to enable hover functionality on mobile devices? I wish for the hover effect seen on desktop to be triggered automatically on mobile devices

I attempted to implement @media (hover: hover) without success. In my design, I have three images in a row that reveal a text overlay when hovered over with a mouse. However, the issue arises when I try to switch to a mobile view, as the images remain un ...

Dealing with asynchronous calls in useEffect.Here are some tips for managing

When invoking a function from within a useEffect, which is located in a different class, there seems to be an issue with receiving the expected data back. The function call triggers another async function that makes an API call and performs operations on t ...

Tips for ensuring a controller function only runs once in AngularJS

I have a controller that is being referenced in some HTML. The HTML changes on certain events, causing the controller function code to execute multiple times. The issue lies in a portion of the code that should only be executed once. Shown below is the ...

Effects with Cleanup - terminates ongoing API calls during cleanup process

Developing a React album viewing application: The goal is to create a React app that allows users to view albums. The interface should display a list of users on the left side and, upon selecting a user, show a list of albums owned by that user on the righ ...

What is the best way to show real-time values using chart js?

Just recently, I've delved into the world of web development and am eager to learn how to integrate chart js for real-time value display. Could anyone offer advice or guide me through the process? var data = []; var temp = []; async f ...

How can I create a customized scrollbar for a div element in an Angular 2.0 CLI project?

I am attempting to create a sleek horizontal scroll bar within one of my div elements, similar to the example shown here: https://i.stack.imgur.com/ziWhi.png My project is based on the angular2 CLI. Progress so far: I came across this package angular2-s ...

Attempting to remove an attribute or property in JavaScript will not yield the desired result

When I try to close the menu after opening it, the inline style won't get removed despite trying different methods. The CSS only has text properties for alignment and the class can-transform contains a media query. That's all the information I h ...

Revise the validation process for the drop-down menu and input field

Looking for help with text field validation based on a dropdown selection. There are two scenarios to consider: 1. User changes dropdown value and then enters text in the field. 2. User enters text in field and then changes dropdown. I've written cod ...

The failure of a unit test involving Jest and try-catch

I am facing an issue with creating unit tests using jest. exportMyData.js const createJobTrasferSetArray = async () => { const data = exportData(); const jobTransferSet = []; try { data.forEach((element) => { const JobPathArray = el ...

Having issues with contenteditable functionality not functioning properly on elements that are dynamically generated

Creating an unordered list dynamically and adding items to it on a button click. Appending it to a section with contenteditable set to true, but encountering issues. The code snippet below demonstrates the process: // Create text input var categoryInput = ...

An issue arose when attempting to proxy to: localhost, at port 4200, for the API endpoint v1/generate

Currently, I am following a tutorial which guides me through the process of creating an application using Angular CLI, Node.js, and Express. A proxy is used to initiate the app, with the proxy configuration file looking like this: { "/api/*": { ...

Utilizing AngularJS Directives to Transclude and efficiently organize data chunks

I'm facing a challenge as I try to convert a jQuery plugin I developed into an AngularJS directive. The issue lies in the transclusion aspect of the process. Link to jQuery Widget plugin: http://plnkr.co/edit/xxZIb2DyAere7pBY6qm7?p=preview Link to A ...