Чтение данных из Json с помощью JQuery


Приветствую вас! В данный момент я активно изучаю javascript и C#, поэтому у меня просто нет времени делать новые уроки, так часто, как хотелось бы. Но сегодня исключение.
На небольшом примере визитной карточки, я бы хотел показать вам, как считывать данные из json файла и отображать их на странице.
Итак, нам понадобятся: jQuery, готовая верстка визитки, которую я уже сделал, OpenServer и желание осуществить проект.
OpenServer нужен для того, чтобы javascript мог нормально работать с файлами. Но, по какой-то причине, можно обойтись и без него, если все проверять в firefox.

Итак верстка. HTML:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Your Visit Card</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="wrapper-card">
    <div class="left">
        <div class="left-content">
            <img src="img/logo.png" alt=""><br />
            <span id="brand-name"></span><br />
            <span id="url"></span><br />
        </div>
    </div>
    <div class="right">
        <div class="name-side">
            <span id="name"></span><br />
            <span id="profession"></span>
        </div>
        <div class="contacts">
            <img src="img/phone.png" alt=""><span id="phone"></span><br />
            <img src="img/url.png" alt=""><span id="site"></span><br />
            <img src="img/mail.png" alt=""><span id="mail"></span><br />
            <img src="img/location.png" alt=""><span id="location"></i></span><br />
        </div>
    </div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

И CSS:

body{
    background: #DDE1ED;
}
a{}
.wrapper-card{
    margin: 10% auto;
    width:395px;
    height: 226px;
    background: #ffffff;
}

.left{
    width: 169px;
    height: 225px;
    border-right: 2px solid #04A8E5;
    background: #1E252D;
    text-align: center;
    float: left;
}

.left-content{
    width: 169px;
    height: 187px;
    background: #262D37;
    margin-top: 20px;
}

.left-content img{
    padding-top: 30px;
    margin-bottom: 5px;
}

#brand-name{
    color: white;
    font-size: 20px;
}

#url{
    color: #118BA2;
}

.right{
    width: 222px;
    height: 225px;
    float: right;
}

.name-side{
    width:211px;
    height: 45px;
    background: url(../img/name_bg.png) no-repeat;
    background-position: 41px 0px;
    margin: 20px 0 0 0;
    text-align: center;
    padding-left: 11px;
    padding-top: 5px;
}

#name{
    font-size: 14px;
    font-weight: bold;
}
#profession{
   color: white;
}

.contacts{
    margin:15px 0 10px 40px;
}

.contacts span{
    width: 21px;
    height: 21px;
    font-size: 14px;
}

.contacts img{
    width: 21px;
    height: 21px;
    margin: 6px 5px 0 0;
}

Сам скрипт main.js:

$(document).ready(function(){
    $.getJSON('info.json', function(data){
        $.each(data, function(key, value){
            document.getElementById("brand-name").innerText = value.brandName;
            document.getElementById("url").innerText = value.url;
            document.getElementById("name").innerText = value.name;
            document.getElementById("profession").innerText = value.profession;
            document.getElementById("phone").innerText = value.phone;
            document.getElementById("site").innerText = value.site;
            document.getElementById("mail").innerText = value.mail;
            document.getElementById("location").innerText = value.location;
        });
    });
});

И наша, мини база info.json :

{
  "info":{
    "brandName": "BRAND NAME",
    "url" : "www.compani.com",
    "profession":"grafic designer",
    "name": "THOMAS SMITH",
    "phone":"+380123456780",
    "site":"www.slusar.su",
    "mail":"skubidu@gmail.com",
    "location":"Ukraine, Kremenchug"
  }
}

Как же ЭТО работает? Все очень просто!

У каждого поля в HTML , где должна быть информация мы указываем уникальный id.

Затем, пишем скрипт, используя мощь jquery, который обращается в Json (по сути как к ассоциативному массиву), выдирая из него ключи и их значения.

После чего, обращаясь, к полям по id запихивает в них эти значения.

Вот и все. Исходники можно скачать также))

Введи свой e-mail:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *