Get data from json with javascript more than one data

Question

I have a question about getting data from json with javascript. I have a form. I want to fill this form with data from json. Now I can do this with this code.

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <form>
        <input id="name_1" name="name" placeholder="Name" type="text" value="" />
        <input id="surname_1" name="surname" placeholder="Surname" type="text" value="" />
        <select id="gender_1" name="gender">
          <option disabled="disabled" selected="selected">Gender</option>
          <option value="F">Female</option>
          <option value="M">Male</option>
          <option value="N">None.</option>
        </select>
        <input id="day_1" maxlength="2" name="day" placeholder="GG" type="text" value="" />
        <select id="month_1" name="month">
          <option disabled="disabled" selected="selected">Month</option>
          <option value="1">Jan</option
          ><option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option
          ><option value="12">Dec</option>
         </select>
        <input id="year_1" maxlength="4" name="year" placeholder="YYYY" type="text" value="" />
    </form>

    <script>
        var data = {
            "name": "Jack",
            "surname": "Rynold",
            "gender": "M",
            "day": 12,
            "month": 3,
            "year": 1995,
        };

        for (key in data) {
            if (data.hasOwnProperty(key))
                $('input[name=' + key + ']').val(data[key]);
            $('select[name=' + key + ']').val(data[key]);
        }
    </script>

</body>

</html>

Now output is like that output1

But if the data is more than one, I also want to open a new form like this.

Data:

var data = [{
            "name": "Jack",
            "surname": "Rynold",
            "gender": "M",
            "day": 12,
            "month": 3,
            "year": 1995,
        },
        {
            "name": "John",
            "surname": "Rynold",
            "gender": "M",
            "day": 30,
            "month": 4,
            "year": 1996,
        }
        ];

Expected Output:

How can I do that?

Thanks for answers.

svey · Accepted Answer · 2021-07-29 20:03:45Z

1

Many ways to do this with jQuery. Add a class to your <form class="client form"> Iterate over your array, and at each iteration clone the initial form and append the cloned instance to the DOM mapping in your client object attrs to the correct fields like you're already doing.

https://api.jquery.com/clone/

answered Jul 29, 2021 at 20:03

svey

1251 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

Get data from json with javascript more than one data

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