在不使用jQuery的情况下解析json，并在HTML代码中添加值

Parse a json without jQuery and add the value in HTML code

本文关键字：HTML 并在 代码 添加 json jQuery 情况下      更新时间：2023-09-26

首先：我不想使用jQuery。

我想找到一种方法来解析这种类型的json，并将其文本添加到特殊标签中：

{
    "datas": {
        "General": [
            {
                "id": "hotel_name",
                "value": "My Hotel name"
            },
            {
                "id": "hotel_description",
                "value": "Lorem ipsum dolor..."
            }
        ],
        "Photos": [
            {
                "id": "photo1",
                "value": "house.png"
            },
            {
                "id": "photo2",
                "value": "house.png"
            }
        ]
    }
}

在HTML上，我有一个特殊的标签：

<mytag id="hotel_name"></mytag>

必须成为：

<mytag id="hotel_name">My Hotel name</mytag>

我试过这个：

function createElements(elements) {
    elements = JSON.parse(elements);
    elements.forEach(funciton (element) {
        var div = document.getElementById(element.id);
        div.innerHTML = element.text;
    });
}
var request = new XMLHttpRequest();
request.onload = createElements;
request.open("get", "datas.json", true);
request.send();

但它并没有像我想要的那样工作。

你有线索吗？

谢谢。

我想你的意思是：

elements.datas.General.forEach(function (element) {
    var div = document.getElementById(element.id);
    div.innerHTML = element.text;
});

在循环数组之前，必须解析每个JSON属性。

编辑、更新

注意，text不作为对象的属性出现在datas.General、datas.Photos数组中；参见element.text。出现名为id、value的属性；即element.id、element.value。

要筛选单个属性名称，请尝试

function createElements(elements) {
    if (elements.target.readyState === 4) {
    var elems = elements.target.response;
        var keys = Object.keys(elems.datas).filter(function(name) {
          return name === "General"
        });
    keys.forEach(function (element, i) {
        var el = elems.datas[element];
        el.forEach(function(key, i) {
          var div = document.getElementById(key.id);
          div.innerHTML = key.value;
        })
    });
    }
};
var request = new XMLHttpRequest();    
request.onload = createElements;
request.responseType = "json";
request.open("GET", "datas.json", true);
request.send();

jsfiddlehttp://jsfiddle.net/k2f7b3mp/

要筛选多个属性名称，请尝试

function createElements(elements) {
    if (elements.target.readyState === 4) {
    var elems = elements.target.response;
        var keys = Object.keys(elems.datas).filter(function(name) {
            return name === "General" || name === "Color"
        });
        console.log(keys, 1)
    keys.forEach(function (element, i) {
        var el = elems.datas[element];
        el.forEach(function(key, i) {
            console.log(key, i);
            if (document.getElementById(key.id)) {
              var div = document.getElementById(key.id);
              div.innerHTML = key.value;
            }
        })
    });
    }
};

http://jsfiddle.net/b6n8q1d1/2/

您需要访问对象的每个属性

elements.datas.General.forEach(function (element) {
var div = document.getElementById(element.id);
div.innerHTML = element.value;
});

工作演示：

var myJSONtext = " {'"datas'": { '"General'": [ { '"id'": '"hotel_name'", '"value'": '"My Hotel name'" }, { '"id'": '"hotel_description'", '"value'": '"Lorem ipsum dolor...'" } ], '"Photos'": [ { '"id'": '"photo1'", '"value'": '"house.png'" }, { '"id'": '"photo2'", '"value'": '"house.png'" } ] }}";
var elements = JSON.parse(" {'"datas'": { '"General'": [ { '"id'": '"hotel_name'", '"value'": '"My Hotel name'" }, { '"id'": '"hotel_description'", '"value'": '"Lorem ipsum dolor...'" } ], '"Photos'": [ { '"id'": '"photo1'", '"value'": '"house.png'" }, { '"id'": '"photo2'", '"value'": '"house.png'" } ] }}");
elements.datas.General.forEach(function (element) {
    var div = document.getElementById(element.id);
    div.innerHTML = element.value;
});
<div id="hotel_name"></div>

jsfiddle上的相同演示：http://jsfiddle.net/wzu29pau/

poipoi。如果您在获取JSON数据方面没有问题，我认为它似乎对您有效。

var obj = JSON.parse(request.responstext);
    console.log(obj.datas.General[0].id);
    console.log(obj.datas.Photos[1].id);

JSON数据类型类似于Array。您应该了解JSON.stringify（）和JSON.parse（）方法。

试试这个：

<body>
<mytag id="hotel_name"></mytag>
<script>
    var xhr = null;
    var myDiv = document.getElementById("hotel_name");
    function load() {
        xhr = new XMLHttpRequest();
        if (xhr != null) {
            xhr.addEventListener("readystatechange", callback, false);
            xhr.open("get", "datas.json", true);
            xhr.send();
        } else {
            alert("not support ajax!!");
        }
    }
    function callback() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var data = JSON.parse(xhr.responseText);
                myDiv.innerHTML = data.datas.General[0].value;
            } else {
                myDiv.innerHTML = "<h2>" + xhr.status + ": " + xhr.statusText + "</h2>";
            }
        }
    }
    load()
</script>
</body>
相关文章：