-1

I am working on Reactjs and using nextjs,I am fetching data using axios, I just want to check before map/loop that whether whether array is empty or not , means if code/loop should work if i have data in array (students.data),How can i do this ? Here is my current code

const [students,setStudents] = useState({
  data: '',
  loading: true
})
const [name,setName] = useState('');
const handleClick2 = async() => {
    $("#mostviews").hide();
        const response = await axios.get(`https://xxxxxxxxxxxxxx.com/${spath}`)
     setStudents({
        data: response.data,
        loading: false
    })
}

{students.data.map((caseStudy ) => (
<a>{caseStudy.title}</a>
))}

In Network tab i am getting data like following way

0   Object { id: "66", cat_name: "pined", title: "Game Engine", … }
1   Object { id: "40", cat_name: "pined", title: "Alpha Release Time !", … }
Improve this question
1
  • the result in console is in array or objects are in an object? Commented Jan 17, 2023 at 5:00

3 Answers 3

Reset to default
0

The best way for your requirement and your current code is to use && operator. Check the following.

 {students.data?.length > 0 &&
     students.data.map((caseStudy) => (
      <a>{caseStudy.title}</a>
  ))}
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

sorry but its not working, nothing showing in page
Yes. It doesn't show anything if your students array has no value. Please make sure that your students array have value or not.
array contaning values , not empty but if i use "length" then nothing displaying, i updated my question ( added more code)
could you write your console.log for that array(students.data) ?
i just posted my data which i am getting in network tab(console) , kindly check
|
0 
 {students && students.length ?
     students.data.map((caseStudy) => (
      <a>{caseStudy.title}</a>
  )) : ""}
Improve this answer

2 Comments

its not working, data is not displaying
see this example stackblitz.com/edit/…
0

You need to modify your code like this, you are using wrong brackets () instead of {}, and if there only one line you can just skip it by writing it in single line as we do in arrow functions usually:

const [students,setStudents] = useState({
  data: [], //change string to array
  loading: true
})
const [name,setName] = useState('');
const handleClick2 = async() => {
    let arr = []
    $("#mostviews").hide();
        const response = await axios.get(`https://xxxxxxxxxxxxxx.com/${spath}`)
        for (const key in response.data) { //if assuming you are getting objects in object instead of obj in array
            arr.push(response.data[key])
        }
     setStudents({
        data: arr,
        loading: false
    })
}

{students.length > 0 && students.data.map((caseStudy ) => {
    return <a>{caseStudy.title}</a>
})}

or if you want to render something when there is no data in array then use:
condition ? renderThis : OrThis

Improve this answer

11 Comments

We need to see more code, like where you are getting data in your array.
Also you are enclosing it in ( ) instead of { }
can you update your answer so i can check and implement at my side
still not displaying anything , actually "students.length" not working in my side (showing nothing)
change data: "" to data: [] as well and try
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.