jQuery 1つの配列のキーを別の配列の値と比較して一致する戻り値

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」アレイ=リターンデータ

キー（<span>なし）「title_」、<h4>内部プリント値が含まれている場合のDOM階層。結果：<h4>Header</h4>

キーに「p_」が含まれている場合、<p>（<span>なし）の値を含む場合。結果：<p>Description</p>

キーに "ul_"が含まれている場合は、各オブジェクトを<li>ループ内に印刷します。結果：<ul><li>Listing One</li><li>Listing Two</li></ul>

これはどのようにjQueryを使用して、この結果を達成するためにページ

<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>

任意のアイデアに追加するには、最終的な結果になりますか？前もって感謝します。

Answer 1

あなたの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. 

below-

$(value).text()機能はHTMLタグを取り除くのに役立ちますので、HTMLタグなしのテキストが必要な場所であればどこでも使用できます。ここで

は、この動作を確認するにはフィドルある - https://jsfiddle.net/schikara/0kf7ht3w/8/

Answer 2

あなたが必要としているものを達成するためには、まずあなたの要件に応じてJSONを解析し、スパンからテキストデータをメインデータから抽出する必要があります。あなたは変数の中にこれを追加し、あなたのページに表示する必要があります。 Beloaはサンプルのインプレッションです

descの値をもとに、JSONを取得し、メインコンテンツからデータを抽出しています。我々はの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. 

}); 

私はスパンからテキストの内容を抽出するための機能の下に作成しました：

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

Answer 3

データのペアとDESC "配列値「私は何を達成したいことは一致している" _

// 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>