how to display object data in react with map method-CodePudding

const [data, setData] = useState({dataOne: "", dataTwo: ""});

How can i render both object values in One react table?

Here's Json Response

dataOne

[{
    "name": "adnan hassan",
    "count": 6960
}, {
    "name": "adnan",
    "count": 69666660
}]

dataTwo

[{
    "metrics": {
        "competition": "LOW",
        "avg_searches": "6600",
        "competition_index": "22"
    },
    "keyword_annotations": {
        "concepts": []
    },
    "text": "dubai homes"
}]

i want to show Count from dataOne & avg_searches, text from dataTwo in table. Map method Working one by one Like this data.dataOne.map() & data.dataTwo.map() But i want to render both values in one method like data.map()

CodePudding user response：

You can merge the two arrays: using:

mergedArray = [...arr1, ...arr2]

dataOne = [{
    "name": "adnan hassan",
    "count": 6960
}, {
    "name": "adnan",
    "count": 69666660
}]

dataTwo = [{
    "metrics": {
        "competition": "LOW",
        "avg_searches": "6600",
        "competition_index": "22"
    },
    "keyword_annotations": {
        "concepts": []
    },
    "text": "dubai homes"
}]

let merged = [...dataOne, ...dataTwo]
console.log(merged)

// Then after you can map the data based on what you want
console.log('--mapped data starts here--')
merged.map((val) => {
  console.log(val)
})

CodePudding user response：

Thank you @Cypherjac for your direction. i solved this problam with https://lodash.com/docs/4.17.15#mergeWith