Question 110714 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

How to convert the following table to JSON with Cypress?

I have the following table and want to convert it into JSON in a specific way

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>

My expected output would be like this as I need to compare the data over UI in html table and a json file having expected data (Note: there may be a varying number of rows):

{
  "myrows" : [
    {
      "Column 1" : "A1",
      "Column 2" : "A2",
      "Column 3" : "A3"
    },
    {
      "Column 1" : "B1",
      "Column 2" : "B2",
      "Column 3" : "B3"
    },
    {
      "Column 1" : "C1",
      "Column 2" : "C2",
      "Column 3" : "C3"
    }
  ]
}

How can this be accomplished?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    following approach I have followed, taking reference from answer given by "Genevieve OR" on my post, Thanks to @Genevieve OR

    var headerList = []
cy.get('table thead tr th').each(($el)=>{
      var headerName = $el.text()
      headerList.push(headerName)// dynamically make a list of header
)}.then(()=>{
      var jsonData = [];
  
      cy.get('table tbody').find('tr').each(($row, rowIndex) => {
             jsonData[rowIndex] = {};// creates object for each row
             cy.wrap($row).find('td').each(($cell, cellIndex) => {
                const text = $cell.text()
                jsonData[rowIndex][headerList[cellIndex]] = text
                const expected = { "myrows" :jsonData}
            
            })
       })
})

    My output

    {
  "myrows": [
    {
      "column_1": "A1",
      "column_2": "A2",
      "column_3": "A3"
    },
    {
      "column_1": "B1",
      "column_2": "B2",
      "column_3": "B3"
    },
    {
      "column_1": "C1",
      "column_2": "C2",
      "column_3": "C3"
    }
  ]
}

  2. 0 
    const rows = document.querySelectorAll("tbody tr");

const result = {
  myrows: []
};
rows.forEach(r => {
  const rData = {}
  r.querySelectorAll("td").forEach((c, i) => {
    rData[`column_${i + 1}`] = c.innerHTML;
  })
  result.myrows.push(rData)
})

console.log(result);
    <table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  3. 0

    It’s fairly straight forward to loop over rows then cells in the row.

    Use index values from each() command to give you access to the expected value in the JSON.

    const expected = { "myrows" : [
  ...  // as in the question, abreviated here
]}

it('check the table', () => {
  cy.get('table tbody tr').each(($row, rowIndex) => {
    cy.wrap($row).find('td').each(($cell, cellIndex) => {
      const text = $cell.text()
      expect(text).to.eq(expected.myrows[rowIndex][`Column ${cellIndex}`]
    })
  })
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search