HTML table to array key issue

Question

I currently have a function which creates an array from a html table the array output is

array:1 [
  0 => array:3 [
    0 => "Test"
    1 => "Test"
    2 => "Test"
  ]
]

Method for creating array from HTML

let convertedIntoArray = [];
        $("table#campaign_csv_table tr").each(function () {
            let rowDataArray = [];
            let actualData = $(this).find('textarea');
            if (actualData.length > 0) {
                actualData.each(function () {
                    rowDataArray.push($(this).text());
                });
                convertedIntoArray.push(rowDataArray);
            }
        });

How would I modify this array so it looks like this:

array:1 [
  0 => array:3 [
    "first_name" => "Test"
    "last_name" => "Test"
    "email" => "Test"
  ]

HTML table

<table class="display">
    <thead>
    <tr class="header">
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody>
 
            <td id="table-cells"
              ><textarea rows="1" cols="50" style="resize: none" required
                                                                                  
                                                                                  ></textarea>
            </td>
            <td id="table-cells"
              ><textarea rows="1" cols="50" style="resize: none" required
                                                                                  
                                                                                  ></textarea>
            </td>
       
       
                <td id="table-cells" class="text-danger"><textarea rows="1" cols="50" style="resize: none" required
                                                                                   class="text-danger w-100"> Invalid Email Address</textarea>
                </td>
        </tr>
    </tbody>
</table>

I've tried using array_values() within PHP but had no luck can anyone see where im going wrong?

It looks like you really want an Array of Objects rather than an Array of Arrays. So perhaps rowDataArray should be rowDataObject and rather than pushing $(this).text(), you'd set the object key and value instead. But hard to tell without your HTML and where first_name, etc are coming from. You should include your html as well so we can attempt to recreate this. — mykaf
– mykaf, Commented Jul 12, 2022 at 15:58
I don't think we need the php; we don't have access to all your php variables. Please use the rendered html only. — mykaf
– mykaf, Commented Jul 12, 2022 at 16:07

kmoser · Accepted Answer · 2022-07-12 16:12:47Z

0

You'll have to push an object instead of an array since you want string keys.

Since your input fields aren't named, I'm using my own array let name = ... to determine the key names based on the index number.

let convertedIntoArray = [];
$("table#campaign_csv_table tr").each(function () {
    let rowDataArray = {};
    let actualData = $(this).find('textarea');
    if (actualData.length > 0) {
        actualData.each(function (i) {
            let name = ['first_name', 'last_name', 'email'][i]
            rowDataArray[name] = $(this).text();
        });
        convertedIntoArray.push(rowDataArray);
    }
});

console.log(convertedIntoArray)

edited Jul 12, 2022 at 16:12

answered Jul 12, 2022 at 16:06

kmoser

9,3693 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML table to array key issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related