How to split return JSON string so I can loop jQuery

Question

In my JSON I get a string back:

selectedDays: "Mon, Tue, Wed, Thur, Fri, Sat"

I need to break this down so that I can add some form of loop to add a class but I have no idea how to do this.

It's so I can add something like the blow in the loop

$('button[name=SOME_NAME]).addClass('.btn-primary');

I can't figure it out, never used JSON data before.

Full data returned in console.log

{
    endTime: "01:02",
    endTimeHr: "01",
    endTimeMin: "02",
    number: "00000001",
    position: "1",
    selectedDates: "All days of the month",
    selectedDays: "Mon, Tue, Wed, Thur, Fri, Sat",
    selectedMonths: "Jan, Aug",
    startTime: "01:01",
    startTimeHr: "01",
    startTimeMin: "01",
    timeRange: "-w",
    timeType: "specificTime"
};

Current HTML For Day Buttons

<div class="form-horizontal" id="selectWeekdaysSection">
    <div class="form-group">
        <div class="col-md-offset-2 col-lg-4">
            <button id="mon" name="weekdaysbutton" class="btn btn-default" type="button" value="Mon">Mon</button>
            <button id="tue" name="weekdaysbutton" class="btn btn-default" type="button" value="Tue">Tue</button>
            <button id="wed" name="weekdaysbutton" class="btn btn-default" type="button" value="Wed">Wed</button>
            <button id="thur" name="weekdaysbutton" class="btn btn-default" type="button" value="Thur">Thur</button>
            <button id="fri" name="weekdaysbutton" class="btn btn-default" type="button" value="Fri">Fri</button>
            <button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sat">Sat</button>
            <button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sun">Sun</button>
        </div>
    </div>
</div>

Screenshot - The blue is the buttons I'm after applying the style too:

It would be good if you would tell us what our HTML is, and to which element(s) you want to add a class, how this depends on the days, and show the desired result. Also please provide the JSON in text format, ... as JSON. What you have at the start of the question is not JSON. At least it lacks braces. — trincot
– trincot, Commented Feb 28, 2019 at 15:27
Do you want to add class to 6 buttons named Mon, Tue, Wed, Thur, Fri, and Sat for this case? I am asking this because I am so confused even after I read the question more than 3 times now. — holydragon
– holydragon, Commented Feb 28, 2019 at 15:30
first things first, selectedDays: "Mon, Tue, Wed, Thur, Fri, Sat" isn't valid JSON — Liam
– Liam, Commented Feb 28, 2019 at 15:31
Like how people want more details and as i'm trying to update it, you downgrade it and try closing it. Give a chance add more details as request please — murday1983
– murday1983, Commented Feb 28, 2019 at 15:32

holydragon · Accepted Answer · 2019-02-28 15:40:12Z

STEPS:

Extract the desired data from the JSON.
Make the string into the format you are using, which is lowercase without spaces.
Split the string into array.
Loop through the array and use each string as button id for the selector.
Add the class to each of them.

const json = {
  selectedDays: "Mon, Tue, Wed, Thur, Fri, Sat"
}
let selectedDays = json.selectedDays.toLowerCase().replace(/ /g, '').split(',')
selectedDays.forEach(day => {
  $('button#' + day).addClass('.btn-primary')
})
// Log the classes
$('button').each((i, e) => {
  console.log($(e).attr('id'), $(e).attr('class'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="mon" name="weekdaysbutton" class="btn btn-default" type="button" value="Mon">Mon</button>
<button id="tue" name="weekdaysbutton" class="btn btn-default" type="button" value="Tue">Tue</button>
<button id="wed" name="weekdaysbutton" class="btn btn-default" type="button" value="Wed">Wed</button>
<button id="thur" name="weekdaysbutton" class="btn btn-default" type="button" value="Thur">Thur</button>
<button id="fri" name="weekdaysbutton" class="btn btn-default" type="button" value="Fri">Fri</button>
<button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sat">Sat</button>
<button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sun">Sun</button>

J.T. Blum · Accepted Answer · 2019-02-28 15:28:34Z

2

The first thing you'll need to do if you haven't already is to parse the JSON data so you can use it as a JavaScript object. After that you should be able to reference the selectedDays property and use JavaScript's split string manipulation method to turn the data into something iterable with .each()

answered Feb 28, 2019 at 15:28

J.T. Blum

3341 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to split return JSON string so I can loop jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related