i wrote this code to get data from json using nextjs
this is the json file:
json file data
import styled from "styled-components";
import type { GetStaticProps, NextPage } from "next";
import { randomUUID } from "crypto";
type PageProps = {
apiData:string
}
const Home: NextPage<PageProps> = ({ apiData }) => {
return <div>
{JSON.stringify(apiData) }
{
apiData.map((i,index)=>{
i.map((e)=>{
return (<div key={index}>
<p>{i.title}</p>
</div>)
})
})
}
</div>;
};
the error is Property 'map' does not exist on type 'string'.ts(2339)
This happens because apiData is defined as a string (line 6 in your example) and therefore does not contain a method map in its prototype. The method map exists only for arrays.
Try changing the type for your PageProps or parse your JSON-string and make sure that your data is an array.
...
type PageProps = {
apiData: any[]
}
...
Or parse the string to JSON.
const Home: NextPage<PageProps> = ({ apiData }) => {
const parsedData = apiData ? JSON.parse(apiData) : null;
if (parsedData === null) {
throw new Error("apiData is not defined.");
}
return (
<div>
{apiData}
{
parsedData.map((i, index) => {
i.map((e) => {
return (<div key={index}>
<p>{i.title}</p>
</div>)
})
})
}
</div>
);
};
Related
I am trying to map through the JSON data using fetch in React but am getting an error with my map statement. What am I doing wrong?
class Carbon extends Component {
constructor() {
super()
this.state = {
data: []
}
}
render() {
return (
<div>
<h5>Co2 Emissions</h5>
<h5>Co2 Per Capita</h5>
{this.state.data.map(data => data.data)}
</div>
)
}
componentDidMount() {
fetch('https://raw.githubusercontent.com/owid/co2-data/master/owid-co2-data.json')
.then( resp => resp.json())
.then((data)=> {
this.setState({
data: data.url
})
console.log(data)
})
}
}
export default Carbon
{this?.state?.data?.map(data => data?.data)}
your data.url in response may not an array i guess that's why its throwing error, you can try this , it should work and not throw error
This is the api http://skunkworks.ignitesol.com:8000/books/ ,
I am trying to fetch the array results from it using the fetch method but instead get an error cannot fetch value of undefined
import React, { Component } from 'react';
class App extends Component {
constructor() {
super()
this.state = {
books: []
}
}
componentDidMount() {
fetch('http://skunkworks.ignitesol.com:8000/books/')
.then(res => res.json())
.then(data => this.setState({ books: data }))
.catch(e => {
console.log(e);
return e;
});
}
render() {
let book = []
book = this.state.books.results;
console.log(book[0])
return (
<div>
<h1>Books</h1>
</div>
)
}
}
export default App;
this is my code.
Also I have observed that json data are usually like [{}] but here it is {} format.
please suggest me some solution.....
As I see from your url link, you json array of data is present in the results key of the returned object from the API.
So if you're only interested by the results you should do something like that :
import React, { Component } from 'react';
class App extends Component {
state = {
books: []
}
async componentDidMount() {
const objectFromUrl = await fetch('http://skunkworks.ignitesol.com:8000/books/')
const data = await objectFromUrl.json() //first way
// or you can use destructuring way
const { results } = await objectFromUrl.json() //second way
this.setState({
books: data.results // results key contains your '[{}]' data an array of objects
})
}
render() {
const { books } = this.state
return (
<div>
<h1>Books</h1>
{books.map(book => (
<h2> {book.id} </h2>
)}
</div>
);
}
// You can use destructuring again to get only key you're interested by
render() {
const { books } = this.state
return (
<div>
<h1>Books</h1>
{books.map(({id, formats}) => (
<h2> {id} </h2>
<h2> { formats[ˋapplication/pdf’] } </h2>
)}
</div>
);
}
}
Feels like I'm missing something obvious here - but I can't figure out how to access my JSON data. I have a Container component:
class About extends Component {
componentDidMount(){
const APP_URL = 'http://localhost/wordpress/'
const PAGES_URL = `${APP_URL}/wp-json/wp/v2/pages`
this.props.fetchAllPages(PAGES_URL, 'about')
}
render(){
return (
<div>
<Header/>
<div className="bg">
<div className="home-wrapper">
<h1>AAAAABBBBBOOOOUUUUUT</h1>
<Counter/>
<AboutInfo />
</div>
</div>
<Footer/>
</div>
)
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchAllPages }, dispatch)
}
export default connect(null, mapDispatchToProps)(About);
And a Smart component:
class AboutInfo extends Component {
render(){
console.log(this.props.page);
console.log(this.props.page.id);
return (
<div>
<h1>This is ID: {this.props.page.id}</h1>
</div>
)
}
}
const mapStateToProps = ({ page }) => {
return { page }
}
export default connect(mapStateToProps)(AboutInfo);
My action:
export const fetchAllPages = (URL, SLUG) => {
var URLEN;
if(!SLUG){
URLEN = URL
} else {
URLEN = URL + "?slug=" + SLUG
}
return (dispatch) => {
dispatch(fetchRequest());
return fetchPosts(URLEN).then(([response, json]) => {
if(response.status === 200){
if(!SLUG) {
dispatch(fetchPagesSuccess(json))
} else {
dispatch(fetchPageBySlugSuccess(json))
}
} else {
dispatch(fetchError())
}
})
}
}
const fetchPageBySlugSuccess = (payload) => {
return {
type: types.FETCH_PAGE_BY_SLUG,
payload
}
}
My reducer:
const page = (state = {}, action) => {
switch (action.type) {
case FETCH_PAGE_BY_SLUG:
console.log(action.paylod)
return action.payload
default:
return state
}
}
This gives me:
When I console.log(this.props.page) in my AboutInfo component, it prints the object, but when I print console.log(this.props.page.id) it gives me undefined. Why can't I print the JSON content? Thanks!
page is an array and hence this.props.page.id is undefined. You might want to access the first element in array in which case you would do
this.props.page[0].id
but you might also need to add a test, since before the response is available you will be trying to access page[0].id and it might break.
You could instead write
this.props.page && this.props.page[0] && this.props.page[0].id
Getting data from the store is async So you must adding loading varibale on your reducer
class AboutInfo extends Component {
render(){
if(this.props.loading) return (<div>loading</div>);
return (
<div>
<h1>This is ID: {this.props.page.id}</h1>
</div>
);
}
}
const mapStateToProps = ({ page, loading }) => {
return { page, loading }
}
on your action try returing
json.page[0]
That is because page is an array and the id is a property of its 1st element.
So use this.props.page[0].id
If the logged object in your screenshot is the this.props.page then you will need and additional .page as that is also a part of the object this.props.page.page[0].id
I need to output data from the json file that the user loads at the front.
I download the json file, but I get a strange store in Redux and can not figure out how to further display the data to the screen from the store.
What should I need to do?
import React from 'react'
import { connect } from 'react-redux'
import * as actions from './actions'
class File extends React.Component {
constructor (props) {
super(props)
}
handleChange (e) {
e.preventDefault();
let reader = new FileReader();
let file = e.target.files[0];
reader.onloadend = () => {
let text = reader.result;
this.props.jsonLoad(JSON.parse(text))
}
reader.readAsText(file)
}
render () {
return (
<div>
<h3> Add your file: </h3>
<input type="file" multiple onChange={this.handleChange.bind(this)}/>
<button >
add text from file
</button>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
json: state.json
}
}
function mapDispatchToProps (dispatch) {
return {
jsonLoad: (json) => dispatch(actions.jsonLoad(json)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(File)
action.js
const USER_JSON = 'USER_JSON';
export function jsonLoad(json) {
console.log( json)
return function (dispatch) {
let file = json
dispatch(addFile(file))
}
}
export function addFile (json) {
return{
type: 'USER_JSON',
payload: json
}
};
JSON.Parse throws errors!
I am currently passing data in through a socket, and I can successfully read the data, but using it as a json object is giving me a lot of troubles. Here is my code
import React, { Component } from "react";
import socketIOClient from "socket.io-client";
class App extends Component {
constructor() {
super();
this.state = {
response: false,
endpoint: "http://127.0.0.1:4001"
};
}
componentDidMount() {
const { endpoint } = this.state;
const socket = socketIOClient(endpoint);
socket.on("message", mi => this.setState({ response: mi }));
}
render() {
const { response } = this.state;
const data = response.cc
return (
<div style={{ textAlign: "center" }}>
{
JSON.stringify(data)
}
</div>
);
}
}
export default App;
I am using jsonfile to read the file and check for changes, if so, push them through. Without using the JSON.stringify function, the page I am currently working in throws an error " If you meant to render a collection of children, use an array instead."
Reason why it is throwing the error is, because the initial value is boolean, and you are trying to run loop on any property of boolean, Here:
const { response } = this.state; // response = false
const data = response.cc // data will be undefined
data.map(.....) // can't read property map of undefined
Solution:
1- One option is skip the rendering until you didn't get the data from server.
Like this:
render(){
if(!this.state.response)
return <div>Loading...</div>
return(....)
}
2- Other option is, define the response as an object instead of boolean in the state, and use || [] with response.cc.
Like this:
constructor() {
super();
this.state = {
response: {},
endpoint: "http://127.0.0.1:4001"
};
}
Render the array using #array.map, Like this:
render() {
const { response } = this.state;
const data = response.cc || [];
return (
<div style={{ textAlign: "center" }}>
{
data.map(el => (
<div key={el.id}>
<p>Rank: {el.rank}</p>
<p>Price: {el.price_usd}</p>
</div>
))
}
</div>
);
}