Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.06.2018, 20:39
Аватар для Kiten
Интересующийся
Отправить личное сообщение для Kiten Посмотреть профиль Найти все сообщения от Kiten
 
Регистрация: 18.05.2018
Сообщений: 16

Как правильно распарсить JSON
Всем привет!
Задача, на первый взгляд, простая: передать значения из JSON в объекты html.

Вот листинг JSON:
var data = 
	{
		"Moscow": "20",
		"Sydney": "38",
        "Lion": "33",
		"Vienna": "14",
        "Paris": "10"
	}


Листинг html:

Код:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="data.json"></script>
</head>
<body> 
     
    <button onmousedown="qwerty()">Button</button>   
    
    <p id="Moscow">1</p>
    <p id="Sydney">1</p>
    <p id="Lion">1</p>
    <p id="Vienna">1</p>
    <p id="Paris">1</p>
    
    <script> 
        
       function qwerty()
        {
        for(x in data)
            console.log(data[x]);
        }
        
    </script>
</body>
</html>
Мне нужно обратиться к каждой строке в JSON, и вытащить из нее названия городов (слева) для запроса по ID, а значения, которые справа, - передать самим объектам. Я пока не силен в JavaScript, и удается вытащить только значения.
Понятно, что можно создать отдельную процедуру для каждого объекта, но у меня их больше сотни, поэтому надо создать правильный цикл. В результате нужно получить вместо единичек в каждом объекте цифры: 20, 38, 33, 14, 10.
Буду рад за любую помощь. Заранее спасибо всем!

Последний раз редактировалось Kiten, 06.06.2018 в 20:55.
Ответить с цитированием
  #2 (permalink)  
Старый 06.06.2018, 20:48
Аватар для Kiten
Интересующийся
Отправить личное сообщение для Kiten Посмотреть профиль Найти все сообщения от Kiten
 
Регистрация: 18.05.2018
Сообщений: 16

console.log у меня стоит просто так, для проверки. Реально я пытался работать в цикле с помощью GetElementByID, и передавать значения через InnerHTML, но что-то никак не получается(((.

Последний раз редактировалось Kiten, 06.06.2018 в 20:56.
Ответить с цитированием
  #3 (permalink)  
Старый 06.06.2018, 20:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,011

Kiten,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>var data =
    {
        "Moscow": "20",
        "Sydney": "38",
        "Lion": "33",
        "Vienna": "14",
        "Paris": "10"
    }
</script>
</head>
<body>

    <button onmousedown="qwerty()">Button</button>

    <p id="Moscow">1</p>
    <p id="Sydney">1</p>
    <p id="Lion">1</p>
    <p id="Vienna">1</p>
    <p id="Paris">1</p>

    <script>

       function qwerty()
        {
        for(x in data) document.getElementById(x).innerHTML = data[x];
        }

    </script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 06.06.2018, 20:58
Аватар для Kiten
Интересующийся
Отправить личное сообщение для Kiten Посмотреть профиль Найти все сообщения от Kiten
 
Регистрация: 18.05.2018
Сообщений: 16

рони,
Супер!!!!!!!!!!!!!!)))))))))))))))))))))))))) )))))))))))))))))
Спасибо большое!
Всем позитивного настроения!!!!!!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно подключаться к внешнему JSON MC-XOBAHCK Общие вопросы Javascript 3 14.02.2018 19:30
Как правильно получить и присвоить данные полученные из сервера Axios, react-redux hambat Общие вопросы Javascript 5 07.03.2017 17:09
Как правильно настроить очерёдность выполнения функций? Altai Общие вопросы Javascript 8 01.02.2017 19:32
Как правильно передать JSON из JSTL в Java Script? drno-reg Элементы интерфейса 22 10.08.2016 17:16
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14