Dynamically generating multiple conditions inside a Javascript if statement

Question

Inside the .map() function of my React component, I have an if statement which I need to contain multiple conditions separated by the || operator. The problem is, this.state.insights is an array consisting of varying lengths depending on the json data that is pulled from my server.

document.getElementById("adMaskid" + this.props.id).innerHTML = audio_data
    .map((sample, i) => {
        let rectOpacity = 1
        if (i > this.state.insights[0].start && i < this.state.insights[0].end || /
            i > this.state.insights[1].start && i < this.state.insights[1].end) {
            rectOpacity = 1;
        } else {
            rectOpacity = 0;
        };

        let sampleWidth = 100.0 / audio_data.length;
        let sampleHeight = sample * 50.0;

        return `<rect style="transform: scaleY(.9); opacity: ${rectOpacity};"
                x=${sampleWidth * i}
                y=${(25 - sampleHeight)}
                width=${sampleWidth}
                height=${sampleHeight} />`
    )}

I'm at a total loss of how to get over this hurdle. If, for example, the this.state.insights array consisted of 3 values, then how would I go about dynamically creating the if statement to reflect that which would look like -

if (i > this.state.insights[0].start && i < this.state.insights[0].end || /
    i > this.state.insights[1].start && i < this.state.insights[1].end ||
    i > this.state.insights[2].start && i < this.state.insights[2].end ||)

Without having to change a bunch of my underlying code, is there a way to do this? I've read about using eval statements but doing so has inclined me to hope that there is a better, safer solution. Thank you very much for any insight. It is extremely appreciated.

Jonas Wilms · Accepted Answer · 2019-03-02 22:12:06Z

2

 this.state.insights.some(({ start, end }) => i > start && i < end )

Just iterate the insights array, no need for eval at all.

answered Mar 2, 2019 at 22:12

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically generating multiple conditions inside a Javascript if statement

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related