Return one array object instead all the object based on the condition using map function

Question

I want to get one index value form an array using map function based on condition in ReactJS.

Currently i am getting all the index value if condition passes but i want to stop the condition once condition true. so that i will one index while return...

JSON Object:

question: [

    {
        'question_type': 'TEXT',
        'question': 'how long have the founders known each other?',
        'question_status': 'Done',
        'expectedAnswer': "",
        'answer': '5 yrs'
    },
    {
        'question_type': 'EITHER',
        'question': 'does any founder have an exit?',
        'question_status': 'Pending',
        'expectedAnswer':['Yes','No'],
        'answer': "",
    },
    {
        'question_type': 'DROPDOWN',
        'question': 'Where are you from?',
        'question_status': 'Pending',
        'expectedAnswer':['india','USA','UK'],
        'answer': "",
    },
]

React function where am doing Filter

const currentQuestion = question.map(function (data, i) {
            if (data.question_status === 'Pending') {
                return (
                    <Row key={i} className='chat-box'>
                        <Col xl='1' lg='1' md='1' className="question-image">
                            <img src='images/chatbot/rectangle-26.png' />
                        </Col>
                        <Col xl='11' lg='11' md='11' className="question-text">
                            {data.question}
                        </Col>

                        <Col xl="11" lg="11" md="11" className="answer-box ">
                            {/* <img className="answer-image pull-right" src='images/chatbot/group-9.png' /> */}
                            <div className="pull-right custome-radio">
                                {data.question_type === 'EITHER'? this.renderEitherField(data.expectedAnswer):null} 
                            </div>
                        </Col>
                    </Row>
                );
            }

        }.bind(this));

Expected Output:

{
    'question_type': 'EITHER',
    'question': 'does any founder have an exit?',
    'question_status': 'Pending',
    'expectedAnswer':['Yes','No'],
    'answer': "",

}

1st index value alone i want to filter instead of 1st and 2nd. Currently i am getting 1st and 2nd index value since the both the question_status is "Pending", but Here i want to get only 1st index value (once first occurred it has to stop return value)

Please let me know if this not best approach to go....

Answer 1

You can use Array.find method. It returns the first value from array which satisfies the condition else undefined.

 const data = [ { 'question_type': 'TEXT', 'question': 'how long have the founders known each other?', 'question_status': 'Done', 'expectedAnswer': "", 'answer': '5 yrs' }, { 'question_type': 'EITHER', 'question': 'does any founder have an exit?', 'question_status': 'Pending', 'expectedAnswer':['Yes','No'], 'answer': "", }, { 'question_type': 'DROPDOWN', 'question': 'Where are you from?', 'question_status': 'Pending', 'expectedAnswer':['india','USA','UK'], 'answer': "", }, ] const out = data.find(x => x.question_status === 'Pending') console.log(out) 

Please keep in mind that Array.find is not supported on IE. You need to use a Polyfill.

The other approach can be to return 0th index of the filtered array. If present it will return the value else undefined.

Answer 2

You can use for of loop.

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let a of arr) {
  console.log(a);
  if (a === 5) {
    break;
  }
}

You can use this example as a ref to match your condition.

Answer 3

You can use filter function to filter out the results using the question_status

const question = [

    {
        'question_type': 'TEXT',
        'question': 'how long have the founders known each other?',
        'question_status': 'Done',
        'expectedAnswer': "",
        'answer': '5 yrs'
    },
    {
        'question_type': 'EITHER',
        'question': 'does any founder have an exit?',
        'question_status': 'Pending',
        'expectedAnswer':['Yes','No'],
        'answer': "",
    },
    {
        'question_type': 'DROPDOWN',
        'question': 'Where are you from?',
        'question_status': 'Pending',
        'expectedAnswer':['india','USA','UK'],
        'answer': "",
    },
]
const arr = question.filter(q => q.question_status === 'Pending')

console.log(arr);

In the above code, the output will be as follows,

[ { question_type: 'EITHER',
    question: 'does any founder have an exit?',
    question_status: 'Pending',
    expectedAnswer: [ 'Yes', 'No' ],
    answer: '' },
  { question_type: 'DROPDOWN',
    question: 'Where are you from?',
    question_status: 'Pending',
    expectedAnswer: [ 'india', 'USA', 'UK' ],
    answer: '' } ]

so simply you can get the first element from the output.

Answer 4

use for statement it satisfy your needs

const data = [

                {
                    'question_type': 'TEXT',
                    'question': 'how long have the founders known each other?',
                    'question_status': 'Done',
                    'expectedAnswer': "",
                    'answer': '5 yrs'
                },
                {
                    'question_type': 'EITHER',
                    'question': 'does any founder have an exit?',
                    'question_status': 'Pending',
                    'expectedAnswer':['Yes','No'],
                    'answer': "",
                },
                {
                    'question_type': 'DROPDOWN',
                    'question': 'Where are you from?',
                    'question_status': 'Pending',
                    'expectedAnswer':['india','USA','UK'],
                    'answer': "",
                },
            ]

function currentQuestion() {
   for (var i=0; i<data.length; i++) {
       if (data[i].question_status === "Pending") return data[i];
   }
}

here for statement will be go out once condition satisfied and the function will give you your value needed