itsmatrik
@itsmatrik
Я - человек.

Как из json файла взять элемент обьекта?

Обьясните чайнику.Есть json файл, у одного из его обьектов есть поле children.Нужна функция, что бы в app js создавался контейнер с дивами у которых будет один класс.Дивов столько, сколько в поле children
{
           "723": {
    "title": "Solutions",
    "id": 723,
    "synthetic": false,
    "parent": null,
    "order": 2,
    "color": "dataBlue",
    "visible": true,
    "active": false,
    "collapsed": true,
    "description": "Products or output delivered by IT and consumed by business units, architectures, customers & partners.",
    "opexCapex": false,
    "offerings": false,
    "products": false,
    "location": [],
    "uid": "723-1665850712465",
    "crumbs": [],
    "children": [
      818,
      821,
      822,
      817,
      820,
      819
    ]
  }
}
  • Вопрос задан
  • 234 просмотра
Пригласить эксперта
Ответы на вопрос 3
IlyaMalone
@IlyaMalone
Frontend Developer
Добрый день.
У вас есть json, вам нужно его распарсить, для этого используется: JSON.parse()
https://learn.javascript.ru/json
Ответ написан
Комментировать
Geminix
@Geminix
Фуллстек nuxt, .net разработчик
Есть json файл, нужно взять один из его объектов, и в нем уже взять поле children. Нужно написать функцию, которая или принимала бы объект, или массив (children) и создавала контейнер с количеством div равным длине массива children. Не благодарите.
Ответ написан
Комментировать
LenovoId
@LenovoId
svg, css,js
Не могу понять что должно получиться, но вот код который считывает json из внешнего файла
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            display:  flex;
        }
        .parent_child{
            padding: 30px;
            background: red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="parent"></div>

    <script src="app.js"></script>
</body>
</html>

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

let parent = document.querySelector(".parent");
readTextFile("main.json", function(text){
    var data = JSON.parse(text);


    for(let i = 0; i<data["723"].children.length; i++){
        let block = document.createElement("div");
        block.classList.add("parent_child")
        parent.append(block)
    }

    
});


Вот такой результат у меня
6355092aad71e671439543.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
20 нояб. 2024, в 15:06
8000 руб./за проект
20 нояб. 2024, в 15:02
5000 руб./за проект
20 нояб. 2024, в 14:56
80000 руб./за проект