Mám požadavek API z mého backendu na frontend ReactJS. Výsledky jsou prezentovány ve formátu JSON. Když uživatel stiskne tlačítko „odeslat“, chci, aby se mu data JSON zobrazovala pouze pro konkrétní klíč pole každého objektu v pěkném formátu seznamu.
-
První fragment kódu je kód JSON
-
Druhý kód je můj kód AXIOS
-
Třetí kód je můj frontendový kód ReactJS s tlačítkem atd.
-
Obrázek je, jak to vypadá, když uživatel stiskne tlačítko. Potřebuji to ve formátu seznamu. To znamená každý záznam na novém řádku. Aktuálně sdružuje vše do jednoho seznamu
Nějaké nápady?
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
}
const App = () =>{
const [buttonTitle, setButtonTitle] = useState("User Data Prior To Change")
const getAPI = ()=>{
const loopList = []
const url = "https://jsonplaceholder.typicode.com"
axios.get(`${url}/posts`)
.then((response)=>{
const myValue = response.data
myValue.forEach(myValueValues => {loopList.push(myValueValues['title'])})
setButtonTitle(loopList)
})
.catch(error => console.error(`Error: ${error}`))
}
<h1>Click button to see list of user</h1>
<button onClick={getAPI}>Button to press to see all info in clean format
</button>
<ul>
<li>{buttonTitle}</li>
</ul>