CODEWITHSUNDEEP
javascriptjqueryjson
murday1983
murday1983

Reputation: 4006

Need to split return JSON string so i can loop JQuery

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.

is so i can add something like the blow in the loop

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

Cant 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 im after applying the style too enter image description here

Upvotes: 1

Views: 54

Answers (2)

holydragon
holydragon

Reputation: 6728

STEPS:

  1. Extract the desired data from the JSON.
  2. Make the string into the format you are using, which is lowercase without spaces.
  3. Split the string into array.
  4. Loop through the array and use each string as button id for the selector.
  5. 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>

Upvotes: 4

J.T. Blum
J.T. Blum

Reputation: 324

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()

Upvotes: 2

Related Questions