Extract the JSON file data by eliminating the indexes (1,2,3..) and transforming it into an array format

Here is the content from the JSON file:

{
    "1": {
        "Order Number": "CA-2017-126221",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "First Name (Billing)": "Abdul",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "75100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    },
    "2": {
        "Order Number": "CA-2017-143259",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "City (Shipping)": "Sanghar",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "68100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    }
}

My goal is to remove the IDs (1, 2, 3, etc.) from the JSON file and convert it into an array. This will allow me to access the values using the .map() method in React.

javascriptarraysjson

Answer №1

const jsonObject = {
    "1": {
        "Order Number": "CA-2017-126221",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "First Name (Billing)": "Abdul",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "75100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    },
    "2": {
        "Order Number": "CA-2017-143259",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "City (Shipping)": "Sanghar",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "68100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    }
};

console.log(Object.values(jsonObject))

You should first JSON.parse() the json before using Object.values().

Answer №2

To extract all the values of the immediate keys in your data, you can utilize the Object.values() method.

const data = {
    "1": {
        "Order Number": "CA-2017-126221",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "First Name (Billing)": "Abdul",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "75100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    },
    "2": {
        "Order Number": "CA-2017-143259",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "City (Shipping)": "Sanghar",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "68100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    }
};

const vals = Object.values(data);

console.log(vals)

Answer №3

Feel free to give this a try

const orders = {
    "1": {
        "Order Number": "CA-2017-126221",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "First Name (Billing)": "Abdul",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "75100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    },
    "2": {
        "Order Number": "CA-2017-143259",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "City (Shipping)": "Sanghar",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "68100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    }
};

console.log(Object.values(orders));

// OR

let orderData = [];
for(let key in orders) {
  orderData.push(orders[key]);
}
console.log(orderData);

Answer №4

If you want to extract data efficiently, consider utilizing Object.entries() along with reduce().

const dataset = {
    "1": {
        "Order Number": "CA-2017-126221",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "First Name (Billing)": "Abdul",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "75100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    },
    "2": {
        "Order Number": "CA-2017-143259",
        "Order Status": "Completed",
        "Order Date": "30/12/2017",
        "City (Shipping)": "Sanghar",
        "State Code (Shipping)": "SD",
        "Postcode (Shipping)": "68100",
        "Shipping Method Title": "Free shipping",
        "Payment Method Title": "Cash on delivery"
    }
};

const output = Object.entries(dataset).reduce((accumulator, currentValue) => ([...accumulator, currentValue[1]]), []);

console.log(output);

I trust this information is beneficial!

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

The rsuite table does not properly reflect changes in state data

This is the render method that I am working on render() { return ( <Contentbox> <ol> {this.state.data.map((obj) => ( <li key={obj._id}>{obj.name}</li> ) ...

javascriptreactjsrsuite

What is the method for obtaining the CSS text content from an external stylesheet?

I've spent countless hours trying to achieve the desired results, but unfortunately, I haven't been successful. Below is a summary of my efforts so far. Any helpful tips or suggestions would be greatly appreciated. Thank you in advance. Upon rec ...

javascriptcss

unable to successfully npm install canvas

For my GitHub repository, please visit here This project was actively developed until November of last year, after which I did not commit any changes. Today, I attempted to run the project again but encountered the following error. My current system versi ...

javascriptnpmcanvas

Toggle the visibility of a div depending on the user's selection

My HTML select element has a few options to choose from: <select class="form-control" data-val="true" data-val-number="The field CodeSetup must be a number." id="CodeSetup" name="CodeSetup"> <option selected="selected" value="0">AllCodes< ...

javascriptjqueryhtmlcss

The Angular Syncfusion schedule is unable to call upon an object that may potentially be 'undefined'

Currently, I am developing an application using Angular Syncfusion to allow users to view and book appointments. I found a helpful resource at the following link: Below you can find the code snippet I have been working on: <ejs-schedule #scheduleObj ...

javascriptangularsyncfusionej2-syncfusion

Utilizing Ajax to dynamically load files within the Django framework

My current project involves working with Django, specifically a feature that requires loading a file and displaying its content in a textarea. Instead of storing the file on the server side or in a database, I am exploring the use of AJAX to send the file ...

javascriptjquerypythonajaxdjango

Having trouble making the child process die in NodeJS fork

I'm facing a roadblock here, perhaps it's just a minor issue that I can't seem to solve because of my lack of experience with NodeJS. Currently, I am developing a Bluetooth device that will be controlled by a master application. For prototy ...

javascriptnode.js

Vue has detected an error during rendering: "TypeError: state.actionInfo.find is not a function"

Using vue.js's cli, I created a basic data register application. The application utilizes lookback.js api with vue cli. The application consists of three pages: show, add, and edit. While the show and add pages function correctly, issues arise when ...

javascriptvue.jsvuejs2loopbackjsvuex

Displaying variables in JavaScript HTML

<script type ="text/javascript"> var current = 0; </script> <h3 style={{marginTop: '10', textAlign: 'center'}}><b>Current Status: <script type="text/javascript">document.write(cur ...

javascripthtml

Please refrain from clearing the text field as it will delete the input value

I feel like I must be overlooking something really minor because I just can't seem to find it! I've been attempting to sanitize the text input by setting the state to ('') and while it clears the variable, the HTML input keeps displayi ...

javascriptreactjsmaterial-uifrontend

What is the best method for regularly importing large JSON datasets into Cloud Firestore?

I have a task to import a large JSON file containing 180k records. Currently, I am able to upload only 500 records per run using the code below, but I need to find a way to efficiently upload all 180k records periodically. My Objectives: Successfully par ...

jsonfirebaseflutterparsinggoogle-cloud-firestore

Switching elements in an array using Vue.js

Within my vue.js web application, I am attempting to switch the positions of two rows in a forum. Below is the code snippet I am using: export default { data() { return { forums: [] } }, met ...

javascriptvue.js

A guide on arranging the JSON array within an AngularJS controller

Can someone assist me with sorting the JSON list provided below in the controller and then displaying it in the view? The orderBy filter only sorts one level, but I need it to sort recursively for all children. Input: R2 -->S4 ------>T5 ------> ...

javascriptjsonangularjs

`Creating a fluid MySQL table using JavaScript`

One of the challenges I'm facing involves working with a MySQL table that consists of 3 columns: MySQL db table +--+----+-------------+ |id|data|display_order| +--+----+-------------+ |0 |0 |2 | +--+----+-------------+ |1 |1 |1 ...

phpjavascripthtmlmysqldatabase

The sample Ajax XML code provided by W3Schools is ineffective

While studying xml parsing in ajax on w3schools.com, I came across an example that functioned perfectly online. However, when I saved it to my desktop as abc.html and note.xml, the XML values weren't displaying. Even though the HTML elements were vis ...

javascripthtmlxmlajaxdom

Iterating over an array of numbers in AngularJS

I have an array of numbers $scope.N = [1,2,3,4]. I want to loop through this array in my HTML code using ng-repeat, similar to the example with JSON ng-repeat. <div ng-repeat="num in N"> {{num}} </div> How can I achieve this with a ...

javascriptarraysangularjsnumbers

Transform the Vue.js component into a Webpack component

I found this code in a tutorial and now I need to make some modifications so it can be compiled with Webpack, including the template script and CSS files. <html> <head> <title>VueJs Instance</title> <s ...

javascriptvue.jswebpack

Unable to configure Struts2 result to output in JSON format

Using json with Struts2 is my goal. However, I encountered an issue when setting the action return type to "json". The error message received was "there is no result type defined for type 'json' mapped with name 'success'." Below is a s ...

jsonstruts2

Adding information into material-ui dropdown using React JS

I could use some assistance with populating data into a Dropdown using material-ui in React. I am new to React and unsure about how to achieve this. I know that I can pass props to the dropdown, but it's not very clear to me. Here is my current code: ...

javascriptreactjsmaterial-ui

Issues with displaying content in <mat-step> element of Angular Material design

When installing Material in Angular and adding stepper HTML code, CSS, and importing all Mat modules into the app.module.ts file, the stepper is now visible. However, the stepper data is not showing up in the HTML. <mat-stepper #stepper> <mat-s ...

jsonangularmaterial-uiangular-materialangular-ui-router