Question

使用$ .getJSON从外部.json文件获取包含以下内容的数据。

{
    "title_12345":"<span class=\"header-class\">Header</span>",
    "p_12345":"<span class=\"description-class\">description</span>",
    "p_23456":"Another paragraph",
    "p_34567":"Another second paragraph",
    "desc": [
        "title_12345", 
        "p_12345",  
        {
            "ul_12345": [
                "li_1", 
                "li_2"
            ]
        },
        "p_23456",  
        {
            "ul_12345": [
                "li_3",
                {
                  "ul_23456": [
                    "li_6",
                    "li_7"
                  ]
                }, 
                "li_4",
                "li_5"
            ]
        }
    ],
    "li_1":"Listing One",
    "li_2":"Listing Two",
    "li_3":"Another Listing",
    "li_4":"Another Second Listing",
    "li_5":"Another Thrid Listing",
    "li_6":"Sub One Listing",
    "li_7":"Sub Two Listing"
}

我想要实现的目标如下。基于具有匹配对键值的“desc”数组创建新对象。

"desc": [
    "title_12345":"<span class=\"header-class\">Header</span>", 
    "p_12345":"<span class=\"description-class\">Description</span>",  
    {
        "ul_12345": [
            "li_1":"Listing One",
            "li_2":"Listing Two"
        ]
    },
    "p_23456":"Another paragraph",  
    {
        "ul_23456": [
            "li_3":"Another Listing",
            {
              "ul_23456": [
                "li_6":"Sub One Listing",
                "li_7":"Sub Two Listing"
              ]
            },
            "li_4":"Another Second Listing"
            "li_5":"Another Thrid Listing"
        ]
    }
]

使用新的“desc”对象，创建html内容以附加到html页面。 请注意，“desc”数组=返回数据的DOM层次结构

如果密钥包含“title_”，则在<h4>内打印值（不含<span>）。结果：<h4>Header</h4>

如果密钥包含“p_”，则在<p>内打印值（不含<span>）。结果：<p>Description</p>

如果key包含“ul_”，则在<li>循环内打印每个对象。结果：<ul><li>Listing One</li><li>Listing Two</li></ul>

这将是追加到页面

的最终结果

<h4>Header</h4>
<p>Description</p>
<ul>
    <li>Listing One</li>
    <li>Listing Two</li>
</ul>
<p>Another paragraph</p>
<ul>
    <li>Another Listing</li>
        <ul>
           <li>Sub One Listing</li> 
           <li>Sub Two Listing</li>
        </ul>
    <li>Another Second Listing</li>
</ul>

知道如何使用jQuery实现这个结果吗？提前谢谢。

Answer 1

要实现您的要求，您必须首先根据您的要求解析JSON，然后从主数据中提取 span 中的文本内容。 Finaaly你应该将它添加到某个变量中并使其在页面中可见。 Beloa是样本强制实施

我们在这里获取JSON并根据我们在 desc 数组中的值提取主要内容中的数据。我们在列表变量中追加 li 数据，其余部分将包含在 html 变量中。

$.getJSON("test.json", function(result){
    var arr = result.desc;
    var html="",list="<ul>";
    for(var i=0;i<arr.length;i++){                  
        if(typeof(arr[i])=='object'){
            for (var key in arr[i]){
                if(key.indexOf("ul_")!=-1){
                    var liItems = arr[i][key];
                    for(var j=0;j<liItems.length;j++){
                        list+="<li>"+extractText(result[liItems[j]])+"</li>";
                    }
                }
            }
        }
        else if(arr[i].indexOf("title_")!=-1){
            html+="<h4>"+extractText(result[arr[i]])+"</h4>";
        }
        else if(arr[i].indexOf("p_")!=-1){
            html+="<p>"+extractText(result[arr[i]])+"</p>";
        }
    }
    list+="</ul>"
    html+=list;
    $("#showHtml").html(html); // show final html whereever you want.

});

我创建了以下功能，用于从span中提取文本内容：

function extractText(s) {
    var span= document.createElement('span');
    span.innerHTML= s;
    return span.textContent || span.innerText;
};

Answer 2

您可以从JSON数据中取出desc数组，然后按照下面的说明进行操作 -

var temp = YOURJSONDATA;
var desc = temp.desc;
var results = {};
var htmlString = '';
$.each(desc, function(index, item) {
    if(typeof item === 'object') {
      Object.keys(item).forEach(function(key) {
          htmlString += '<ul>';
                $.each(item[key], function(innerIndex, innerItem) {
            if(!results.hasOwnProperty(key)) results[key] = Array();
            results[key][innerItem] = temp.hasOwnProperty(innerItem) ? temp[innerItem] : '';
            console.log(results[key][innerItem]);
            htmlString += getHtmlForKey(innerItem, results[key][innerItem]);
          });
          htmlString +='</ul>';
            });
    } else {
        results[item] = temp.hasOwnProperty(item) ? temp[item] : '';
        htmlString += getHtmlForKey(item, results[item]);
    }
});
function getHtmlForKey(key, value) {
    if(key.indexOf('title_') !== -1) { return "<h4>"+getData(value)+"</h4>"; }
    if(key.indexOf('p_') !== -1) { return "<p>"+getData(value)+"</p>"; }
    if(key.indexOf('li_') !== -1) { return "<li>"+getData(value)+"</li>"; }
}
function getData(str) {
    var testElement= document.createElement('testElement');
    testElement.innerHTML= str;
    return testElement.textContent || testElement.innerText;
} 
//htmlString variable now contains the final HTML string.

请注意$(value).text()函数有助于剥离HTML标记，因此只要您需要不带html标记的文本，就可以使用它。

这是一个在行动中看到这一点的小提琴 - https://jsfiddle.net/schikara/0kf7ht3w/8/

Answer 3

尝试

// Helper function to check if variable is an object(i,e.. {})
function isObject(obj) {
    return Object.prototype.toString.call(obj) === '[object Object]'
}

// Parent for append elements
var parent = $("#parent")

// JSON data
var json = {
    "title_12345": "<span class=\"header-class\">Header</span>",
    "p_12345": "<span class=\"description-class\">Description</span>",
    "p_23456": "Another paragraph",
    "desc": [
        "title_12345",
        "p_12345",
        {
            "ul_12345": [
                "li_1",
                "li_2",
            ]
        },
        "p_23456",
        {
            "ul_131233": [
                "li_21",
                "li_22",
            ]
        }

    ],
    "li_1": "Listing One",
    "li_2": "Listing Two",
    "li_21": "Another Listing",
    "li_22": "Another second paragraph",
}

// Mapping of html tags to be used
var htmltags = {
    'title': 'h4',
    'p': 'p',
    'ul': 'ul',
    'li': 'li'
}

// Iterating over desc, maintains level
json["desc"].forEach(function (element) {

    // Calls approprite method to handle given element
    if (Array.isArray(element)) {
        parseArray(element)
    } else if (isObject(element)) {
        parseObject(element)
    } else {
        var child = document.createElement(htmltags[element.split('_')[0]])
        child.innerHTML = $(json[element]).text() || json[element] || ""
        parent.append(child)
    }
})

function parseArray(element) {
    element.forEach(function (item) {
        if (Array.isArray(item)) {
            parseArray(item)
        } else if (isObject(item)) {
            parseObject(item)
        } else {
            var child = document.createElement(htmltags[item.split('_')[0]])
            child.innerHTML = $(json[item]).text() || json[item] || ""
            parent.append(child)
        }
    })

}

function parseObject(element) {
    Object.keys(element).forEach(function (key) {
        if (Array.isArray(element[key])) {
            var child = document.createElement(htmltags[key.split('_')[0]])
            parent.append(child)
            parent = child
            parseArray(element[key])
            parent = $("#parent")

        } else if (isObject(element[key])) {
            parseObject(element[key])
        } else {
            var child = document.createElement(htmltags[element[key].split('_')[0]])
            child.innerHTML = $(json[element[key]]).text() || ""
            parent.append(child)

        }
    })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"></div>

jQuery比较一个数组的键与另一个数组的值并返回匹配

3 个答案: