JSON & JS

ש.ב.ח.

שלום וברכה
השאלה שלי קצת מורכבת מקווה שאצליח לסביר,

יש לי מערך בPHP שמכיל מערכים שונים באופן הבא:

Array
(
    [1-אפשרות אחת] => Array
        (
            [11] => אופציה 1
            [12] => אופציה 2
            [13] => אופציה 3
            [14] => אופציה 4
            [15] => אופציה 5
            [16] => אופציה 6
            [17] => אופציה 7
            [18] => אופציה 8
            [19] => אופציה 9
            [20] => אופציה 10
        )
[2-אפשרות שתיים] => Array
       (
            [1] => אופציה 1
            [2] => אופציה 2
            [3] => אופציה 3
            [4] => אופציה 4
            [5] => אופציה 5
            [6] => אופציה 6
            [7] => אופציה 7
            [8] => אופציה 8
            [9] => אופציה 9
            [0] => אופציה 10
        )

)

ובכן, יש לי טופס על הדף שכל השדות שלו נמשכות מאותו מערך, כלומר:
שדה רדיו ראשון נמשך בהמערך ברמה הראשונה כך שכל רדיו יקבל id של המספר (לפני המקף) והvaleu יקבל את המחרוזת (אחרי המקף)
במקרה דנן בסך הכל 2 רדיו.

ברגע שהמשתמש בוחר באחד מהם השדה השני נבנה
בהתאם לid שנבחר יתבצע לולאה על המערך שהמפתח שלו מתחיל עם אותו id (לפני המקף)
ויווצרו כפתורי רדיו בהתאם לתוכן אותו מערך פנימי,
למשל אם המשתמש בחר ברדיו הראשון בשדה הראשון

id = "1" valeu="אפשרות ראשונה"

תווצר השדה השניה בהתאם לתוכן אותו מערך

<input type="radio" id="1" name="radio" valeu="אופציה 1">
<span>אופציה 1</span>
<input type="radio" id="2" name="radio" valeu="אופציה 2">
<span>אופציה 2</span>
<input type="radio" id="3" name="radio" valeu="אופציה 3">
<span>אופציה 3</span>

וכן הלאה... עד אפשרות 10

בPHP אני יודע איך עושים את זה אך נראה לי הזוי לקרוא AJAX על כל שינוי
במקום זה אני מעוניין לקרוא AJAX מיד בעליית הדף שתקבל את המערך בJSON

ומכאן השאלה איך מהJSON הזה אפשר למשוך פרטים עם התניות ורמות עומק אובייקט כמו שתיארתי לעיל.

אשמח להחכים

dovid

הפלט של הקוד הבא:

$arr = Array
(
    "1-Top level option" => Array
        (
            1  => "OptionA 1 ",
            2  => "OptionA 2 ",
            3  => "OptionA 3 ",
            4  => "OptionA 4 ",
            5  => "OptionA 5 ",
            6  => "OptionA 6 ",
            7  => "OptionA 7 ",
            8  => "OptionA 8 ",
            9  => "OptionA 9 ",
            10 => "OptionA 10"
        ),
    "1-Top level option" => Array
       (
            11 => "OptionB 1 ",
            12 => "OptionB 2 ",
            13 => "OptionB 3 ",
            14 => "OptionB 4 ",
            15 => "OptionB 5 ",
            16 => "OptionB 6 ",
            17 => "OptionB 7 ",
            18 => "OptionB 8 ",
            19 => "OptionB 9 ",
            20 => "OptionB 10"
        )

);

echo json_encode($arr);

נותן כזה JSON:

{
  "1-Top level option": {
    "1": "OptionA 1 ",
    "2": "OptionA 2 ",
    "3": "OptionA 3 ",
    "4": "OptionA 4 ",
    "5": "OptionA 5 ",
    "6": "OptionA 6 ",
    "7": "OptionA 7 ",
    "8": "OptionA 8 ",
    "9": "OptionA 9 ",
    "10": "OptionA 10"
  },
  "2-Top level option": {
    "11": "OptionB 1 ",
    "12": "OptionB 2 ",
    "13": "OptionB 3 ",
    "14": "OptionB 4 ",
    "15": "OptionB 5 ",
    "16": "OptionB 6 ",
    "17": "OptionB 7 ",
    "18": "OptionB 8 ",
    "19": "OptionB 9 ",
    "20": "OptionB 10"
  }
}

אתה מבקש מהשרת את כל הרשימה (אם זה דינמי ממש אז מבקשים רק רמה עליונה, וכן, עושים ajax כל פעם וזה לא הזוי)
כעת השאלה שלך עברה לתחום הJS, לא כן?
אתה משתמש עם ספריה כל שהיא בצד לקוח? jQuery? או כלום?

ש.ב.ח.

@dovid אמר בJSON & JS:

נותן כזה JSON:

בהחלט!

@dovid אמר בJSON & JS:

אם זה דינמי ממש אז מבקשים רק רמה עליונה

לא הבנתי.

@dovid אמר בJSON & JS:

וכן, עושים ajax כל פעם וזה לא הזוי

הדינמיות היא בקטע של הקליינט כי מצד מסד הנתונים אלו נתונים שמזין המנהל וזה לא משהו שאמור להשתנות לעיתים תכופות, אף על פי כן לבצע AJAX על כל לחיצה/שינוי בחירה? זה לא משאב מיותר?

@dovid אמר בJSON & JS:

כעת השאלה שלך עברה לתחום הJS, לא כן?

כן

@dovid אמר בJSON & JS:

אתה משתמש עם ספריה כל שהיא בצד לקוח? jQuery? או כלום?

jQuery

dovid

"כי מצד מסד הנתונים אלו נתונים שמזין המנהל וזה לא משהו שאמור להשתנות לעיתים תכופות"
זה נקרא סטטי. בכאלה מקרים ראוי להוריד את כל המידע בבת אחת מייד בהתחלה, למעט אם מדובר בכמות מידע גדולה שאז עדיף לעשות ajax גם בנתונים סטטיים (אפשר לשמור בlocalStorage כדי למהר ביצועים לפעם הבאה).

אז אתה שואל איך מייצרים radio בJS ואיך מאזינים לאירוע בחירה ולפי זה מוסיפים אחרים.
אם הבנתי נכון, תבחון את הקוד הזה ותתאים אותו לצרכיך:

https://codepen.io/dlt/pen/RzJaJd?editors=1010#0

ש.ב.ח.

@dovid אמר בJSON & JS:

זה נקרא סטטי.

נכון, הנתונים הם סטטיים אך השדה דינמי בהתאם לבחירה בשדה אחר, הבנת טוב.

@dovid אמר בJSON & JS:

תבחון את הקוד הזה ותתאים אותו לצרכיך:

זה נראה בול... אני אבדוק עוד מעט.

ש.ב.ח.

@dovid אני מתייחס למה שכתבת בקוד
יש לי כמה שאלות (חשוב לי להבהיר כי אני ממש מתחיל אך יש לי כבר ידע רב ב"ה)
הבנתי כמעט הכל חוץ מ:

 input.on('change', topHandle);

למה זה צריך להיות בתוך הלולאה?
ויותר, איך זה עוד כשזה בלולאה? // נראה שהלולאה חייה כל וחוזרת על עצמה כל הזמן עד לעולם ועד, אחרת איך היא יודעת שביצעת את אירוע השינוי?

var selected = $(this).data('index');

נלקח הdata-index ששמת בכל אחד, נכון?

var nodes = dataFromServer[selected];

עכשיו הnodes מכיל אובייקט אחד בלבד

${prop}

כאן הצגת את הkey של התכונה באובייקט

אבל מה זה?>

${nodes[prop]}

את התוצאה של זה הבנתי אבל איך זה בפירוש המילות ... ?

dovid

@ש-ב-ח
הלולאה הראשונה עוברת על ערכי הtop level, וזה בעצם אומר שתי איטרציות ("סיבובים") בלבד.
המשפט:

input.on('change', topHandle);

לא ממתין לפעולה מסויימת אלא רק אומר לדפדפן: "כאשר יהיה שינוי באלמנט זה, אנא הודע על כך לtopHandle".
הדפדפן "מהנהן בראשו" מיידית, ורושם לעצמו את הנקודה הזו. בבא בהעת כאשר תלחץ על אחד משתי האלמנטים שנוצרו בלולאה, הדפדפן יפעיל את המתודה topHandle תוך נתינת ההקשר (בthis) המתאים.

var selected = $(this).data('index');

אכן לוקח מהdata-index, זה שקול ל

var selected = $(this).attr('data-index');

הnodes מכיל את כל האלמנטים שתחת מפתח אב. כלומר האופציות בדוגמה שהבאת.
כיון שהprop הוא הkey, אז אפשר לפנות לvalue של כל אופציה ע"י

nodes[prop]

ש.ב.ח.

@dovid אמר בJSON & JS:

הדפדפן "מהנהן בראשו" מיידית, ורושם לעצמו את הנקודה הזו.

זה בדיוק העניין
כאשר אני מפעיל פונקציה שמאזינה לשינוי - הבנתי
אבל כאן זה נעשה בתוך הלופ, כך כשהלופ נגמר למה שהאזנה תישאר, איפה הוא שומר את זה?
-זה שזה עובד אני יודע, אבל מה השיטה של זה שזה עובד ככה (עוד פעה 'זה שזה זה וזהו זה' ...).

@dovid אמר בJSON & JS:

כיון שהprop הוא הkey, אז אפשר לפנות לvalue של כל אופציה

אוהה איך לא הבנתי...

אהרן

@ש-ב-ח אמר בJSON & JS:

איפה הוא שומר את זה?

מאחורי הארון השמאלי, איפה שמאובק
הוא רושם א"ז בתוך האלמנט
בגלל שיצרת סידרה של אלמנטים, אתה צריך את הלולאה לרשום את האזנה הזו לכל האלמנטים.

dovid

@ש-ב-ח אמר בJSON & JS:

זה בדיוק העניין
כאשר אני מפעיל פונקציה שמאזינה לשינוי - הבנתי
אבל כאן זה נעשה בתוך הלופ, כך כשהלופ נגמר למה שהאזנה תישאר, איפה הוא שומר את זה?
-זה שזה עובד אני יודע, אבל מה השיטה של זה שזה עובד ככה (עוד פעה 'זה שזה זה וזהו זה' ...).

אני משוכנע שלא קראת בתשומת לב מה שכתבתי:

@dovid אמר בJSON & JS:

המשפט:
input.on('change', topHandle);

לא ממתין לפעולה מסויימת אלא רק אומר לדפדפן: "כאשר יהיה שינוי באלמנט זה, אנא הודע על כך לtopHandle".
הדפדפן "מהנהן בראשו" מיידית, ורושם לעצמו את הנקודה הזו. בבא בהעת כאשר תלחץ על אחד משתי האלמנטים שנוצרו בלולאה, הדפדפן יפעיל את המתודה topHandle תוך נתינת ההקשר (בthis) המתאים.

תחומים - פורום חרדי מקצועי

JSON & JS