How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?

[asifakhtar]

I have to save/batch update all rows where any rows’ input or select elements contains class bg-warning or save all rows where row’s id contains “trScholar_evt” with a button click. I want to create a JOSN array in the following format using JavaScript or jQuery. My JSON array contains information about the rows and all columns.

//Need a JOSN array in the following format 

const data = 
[
  {
    "row_ID": "trScholar_11085716",
    "row_Data_Attributes": [{"recordid": "11085716", "ownerid": "7147119"}],
    "row_Class": "",
    "columns": [
      {
        "column_Header":"Unique Identifier",
        "column_ID":"scholarUniqueID_11085716",
        "column_Class": "scholarUniqueID col-id-num",
        "column_Value":"11085716"
      },
      {
        "column_Header":"Scholar Last Name",
        "column_ID":"scholarLastName_11085716",
        "column_Class": "dataInput scholarLastName",
        "column_Value":"Conway"
      },
      {
        "column_Header":"Scholar First Name",
        "column_ID":"scholarFirstName_11085716",
        "column_Class": "dataInput scholarFirstName",
        "column_Value":"Aaron"
      },
      {
        "column_Header":"Status of Scholar Activit",
        "column_ID":"activityStatus_11085716",
        "column_Class": "activityStatus",
        "column_Value":"Draft"
      },
      {
        "column_Header":"Grant Fiscal Year",
        "column_ID":"grantFiscalYear_11085716",
        "column_Class": "dataInput grantFiscalYear bg-warning",
        "column_Value":"2019"
      },
      {
        "column_Header":"Status",
        "column_ID":"select_status_11085716",
        "column_Class": "dataInput select_status",
        "column_Value":"Active"
      },
      {
        "column_Header":"Scholar E-mail",
        "column_ID":"scholarEmail_11085716",
        "column_Class": "dataInput scholarEmail",
        "column_Value":"aaron.conway@downstate.edu"
      },
      {
        "column_Header":"Scholar Phone",
        "column_ID":"scholarPhone_11085716",
        "column_Class": "dataInput scholarPhone",
        "column_Value":"315-263-7593"
      },
      {
        "column_Header":"Scholar Gender",
        "column_ID":"select_scholarGender_11085716",
        "column_Class": "dataInput select_scholarGender",
        "column_Value":"Male"
      },
      {
        "column_Header":"Race",
        "column_ID":"select_scholarRace_11085716",
        "column_Class": "dataInput select_scholarRace",
        "column_Value":"Black or African American"
      },
      {
        "column_Header":"Multiple Races",
        "column_ID":"sscholarMultiRace_11085716",
        "column_Class": "dataInput scholarMultiRace",
        "column_Value":"Asian"
      },
      {
        "column_Header":"Ethinicity",
        "column_ID":"select_scholarEthinicity_11085716",
        "column_Class": "dataInput select_scholarEthinicity",
        "column_Value":"Not Hispanic or Latino or Spanish Origin"
      },
      {
        "column_Header":"Home State",
        "column_ID":"select_scholarState_11085716",
        "column_Class": "dataInput select_scholarState",
        "column_Value":"NY"
      },
      {
        "column_Header":"Academic Level",
        "column_ID":"select_undergraduateGraduate_11085716",
        "column_Class": "dataInput select_undergraduateGraduate",
        "column_Value":"Doctoral"
      },
      {
        "column_Header":"Major Studies",
        "column_ID":"select_majorStudies_11085716",
        "column_Class": "dataInput select_majorStudies",
        "column_Value":"Anesthesia"
      },
      {
        "column_Header":"If other, identify Major Study",
        "column_ID":"otherMajorStudy_11085716",
        "column_Class": "dataInput majorStudies",
        "column_Value":"Medicine"
      },
      {
        "column_Header":"Future Focus Area",
        "column_ID":"select_futureFocusArea_11085716",
        "column_Class": "dataInput select_futureFocusArea bg-warning",
        "column_Value":"Dentistry"
      },
      {
        "column_Header":"if other, identify Future Focus Area",
        "column_ID":"inputFutureFocusArea_11085716",
        "column_Class": "dataInput futureFocusArea",
        "column_Value":"Test future Focus Area"
      },
      {
        "column_Header":"Intended Specialty",
        "column_ID":"select_intendedSpecialty_11085716",
        "column_Class": "dataInput select_intendedSpecialty bg-warning",
        "column_Value":"Allergy and immunology"
      },
      {
        "column_Header":"if other, identify Intended Specialty",
        "column_ID":"inputIntendedSpecialty_11085716",
        "column_Class": "dataInput intendedSpecialty",
        "column_Value":"Test Intended Specialty"
      },
      {
        "column_Header":"Full Time or Part Student",
        "column_ID":"select_FullTimePartTime_11085716",
        "column_Class": "dataInput select_FullTimePartTime bg-warning",
        "column_Value":"Full Time"
      },
      {
        "column_Header":"Intended Profession",
        "column_ID":"txtIntendedProfession_11085716",
        "column_Class": "dataInput txtIntendedProfession bg-warning",
        "column_Value":"Test Intended Profession"
      },
      {
        "column_Header":"Degree Awarded",
        "column_ID":"txtDegreeAwarded_11085716",
        "column_Class": "dataInput txtDegreeAwarded bg-warning",
        "column_Value":"Test Degree Awarded"
      },
      {
        "column_Header":"2019 Scholarship Amount Awarded",
        "column_ID":"2019scholarshipAmount_11085716",
        "column_Class": "dataInput 2019scholarshipAmount bg-warning",
        "column_Value":"100"
      },
      {
        "column_Header":"2020 Scholarship Amount Awarded",
        "column_ID":"2020scholarshipAmount_11085716",
        "column_Class": "dataInput 2020scholarshipAmount bg-warning",
        "column_Value":"200"
      },
      {
        "column_Header":"2021 Scholarship Amount Awarded",
        "column_ID":"2021scholarshipAmount_11085716",
        "column_Class": "dataInput 2021scholarshipAmount bg-warning",
        "column_Value":"300"
      },
      {
        "column_Header":"2022 Scholarship Amount Awarded",
        "column_ID":"2022scholarshipAmount_11085716",
        "column_Class": "dataInput 2022scholarshipAmount bg-warning",
        "column_Value":"400"
      },
      {
        "column_Header":"Amount Awarded to Date",
        "column_ID":"scholarshipAwardforAcademicYear_11085716",
        "column_Class": "dataInput scholarshipAwardforAcademicYear",
        "column_Value":"21000"
      },
      {
        "column_Header":"School Attended",
        "column_ID":"schoolAttended_11085716",
        "column_Class": "dataInput schoolAttended",
        "column_Value":"State University of New York Downstate Medical Center College of Medicine"
      },
      {
        "column_Header":"School City",
        "column_ID":"schoolCity_11085716",
        "column_Class": "dataInput schoolCity",
        "column_Value":"Brooklyn"
      },
      {
        "column_Header":"School State",
        "column_ID":"select_schoolState_11085716",
        "column_Class": "dataInput select_schoolState",
        "column_Value":"NY"
      },
      {
        "column_Header":"Year of Graduation",
        "column_ID":"yearofGraduation_11085716",
        "column_Class": "dataInput yearofGraduation",
        "column_Value":"N/A"
      },
      {
        "column_Header":"Anticipated Year of Graduation",
        "column_ID":"anticipatedYearofGraduation_11085716",
        "column_Class": "dataInput anticipatedYearofGraduation",
        "column_Value":"2022"
      }
    ]
  }  
]

Unique Identifier	Scholar Last Name	Scholar First Name	Status of Scholar Activity	Grant Fiscal Year	Status	Scholar E-mail	Scholar Phone	Scholar Gender	Race	Multiple Races	Ethinicity	Home State	Academic Level	Major Studies	If other, identify Major Study	Future Focus Area	if other, identify Future Focus Area	Intended Specialty	if other, identify Intended Specialty	Full Time or Part Student	Intended Profession	Degree Awarded	2019 Scholarship Amount Awarded	2020 Scholarship Amount Awarded	2021 Scholarship Amount Awarded	2022 Scholarship Amount Awarded	Amount Awarded to Date	School Attended	School City	School State	Year of Graduation	Anticipated Year of Graduation
11085716			Draft		Active Inactive			Female Male	Asian Black or African American		Hispanic or Latino or Spanish Origin Not Hispanic or Latino or Spanish Origin	AL NY	Associates Bachelors Masters Doctoral	Anesthesia Behavioral Health		Dentistry Physician		Allergy and immunology Anesthesiology		Full Time Part Time										AL NY			X
					Active Inactive			Female Male	Asian Black or African American		Hispanic or Latino or Spanish Origin Not Hispanic or Latino or Spanish Origin	AL NY	Associates Bachelors Masters Doctoral	Anesthesia Behavioral Health		Dentistry Physician		Allergy and immunology Anesthesiology		Full Time Part Time										AL NY			X

``` ```

[m_hutley]

So… I dont know your level of knowledge with jquery. So answering this without “do it for me” (which i’m not going to do) is going to have to be somewhat vague.

@asifakhtar

I have to save/batch update all rows where any rows’ input or select elements contains class bg-warning or save all rows where row’s id contains “trScholar_evt” with a button click.

So. On click, find all rows that :has(".bg-warning") (Yay for CSS4), or whose id *= “trScholar_evt”. The multiple selector syntax is a comma , and the join on a comma is “or”.
Pull the header row of the table, and construct a column_header array.
map the rows, construct an object from each row, containing the row attributes, and a columns array using the column_header array to fill the column_Header values, and the cell values for the rest.
Your return is data.

Give it a try, and let us know where you struggle.

[SamuelCalifornia]

See JSON; JSON is based on a subset of the JavaScript Programming Language Standard ECMA-262. Unless you do something unusual, when you read a JSON file using JavaScript you have JavaScript data. Also JSON files are created by writing out JavaScript data. The main difference between JSON and the full JavaScript language is that JSON does not support functions, obviously.

It is not clear to me whether your input is JSON or DOM. Probably DOM. Therefore the answer probably is that you just need to create the corresponding JavaScript data. Consistent with that, I searched for convert json to javascript and got some results. Try that.