React: How to create table from the following json

Question

I created the following API object using python and im passing it to React using flask.

Im trying to plot all the results into a table like this:

Date	Ps2	ps2 emulator	ps2 games
2020-01-26	64	61	52
2020-0202	70	45	71

For now Im trying to add into a table but Im only able to display the dates since its the only value I know. All the other ones vary depending on the user input. So ps5, ps2 emulator etc etc will change depending on user input.

My code is the following:


  state = {
    kws :[]
  }

keyword = e => {
    e.preventDefault();
    axios.post("/trends",{search_keyword: document.getElementById("keywords").value})
    .then((res) => {
  
      const data = res.data

      const keyword = []

      for (var i in data)
      {
      keyword.push(data[i])}

      console.log("this is variable keyword: " , keyword[1])

      this.setState({kws: keyword[1]})
      


    }
    )}

ender() {

    const {kws =[]} = this.state
    return (
....

        <Table hover>
            <thead>
              <tr>
                <th>Keyword</th>
                <th>Serarch Volume</th>
              </tr>
            </thead>
            <tbody>


            {kws.length ? kws.map(kws => (

              <tr>
                <td>{kws.date}</td>
                <td>{kws.}</td>
                <td>{kws.}</td>
                <td>{kws.}</td>
              </tr>



              )):(

            <h1> Loading </h1>)
            }
            </tbody>
        </Table>

)

Also Is the way im formatting this json object correct? Or should I format it differently?

Hemant · Accepted Answer · 2021-01-13 21:20:15Z

Update your table element like this

Replace the below part

         <Table hover>
            <thead>
              <tr>
                <th>Keyword</th>
                <th>Serarch Volume</th>
              </tr>
            </thead>
            <tbody>


            {kws.length ? kws.map(kws => (

              <tr>
                <td>{kws.date}</td>
                <td>{kws.}</td>
                <td>{kws.}</td>
                <td>{kws.}</td>
              </tr>
              )):(

            <h1> Loading </h1>)
            }
            </tbody>
        </Table>

with this

{kws.length > 0 ? (
  <Table hover>
      <thead>
          <tr>
              {Object.keys(kws[0]).map((key) => (
                  <th>{key}</th>
              ))}
          </tr>
      </thead>
      <tbody>
          {kws.map((kwsVal) => (
              <tr>
                  {Object.values(kwsVal).map((val) => (
                      <td>{val}</td>
                  ))}
              </tr>
          ))}
      </tbody>
  </Table>
) : <div>No data available</div>}

I suggest you not to use hardcoding practices like {kws.date} etc. It will cause severe issues when making further updates.

Have a look at Object.values(), Object.keys() used in above implementation.

Update: In case you want to use specific object values for table such as date, ps2, etc. you can do something like this. Just replace

const { kws = [] } = this.state;

with this

const kws = this.state.kws.map(({date, ps2}) => ({date, ps2}));

Here, i have used object destructuring to convert given array into an array of object having only two keys i.e. date and ps2. You can add whatever keys you want instead of the two i.e. date, ps2 used by me.

Update1: You need to store userInputList as a state, and then you can get an array of objects having only those key:value pairs which are present in userInputList like this.

const kws = this.state.kws;
let userInputList = ['date', 'ps3'];
let newKws = kws.map((k) => Object.fromEntries( userInputList.map( x => [x, k[x]]) ));
console.log(newKws);

Here, userInputList is the array of values user has provided as input and newKws is desired output. You will need to manage this array from your end based on user input, Have a look at Object.fromEntries() used in above implementation for more clarification.

Hi, Thanks for t=your answer. Is really good and it gets everything on my table perfectly. I have an additional question If I want to plot this data would date be ok to be hardcoding? Also, how do I select my X axis?
For example, what object.value would I select If I only want to plot date and only column 1? ( PS2)
@Sundios the answer was a bit legthy to be updated in comment, so i have updated the existing answer for your above two questions.
But the problem is that ps2 changes depending on user input. So in some cases can be a different word. Is there a way of getting the index? e.g {{date, 0 }} or something like that?
So the api is built from a keyword we select. So e.g if we do ps1, then the json responsewill contain date,ps1, ps1 sales, ps1 news, etc random thing people are searching for. So If I want to have only first index without explicitly hardcoding the keyword how would I do it?

Collectives™ on Stack Overflow

React: How to create table from the following json

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related