如何将自定义数据为 'x' 的 div 匹配到具有相同值 'x' 的 json 对象?
How to do a match with div with a custom-data of 'x' to a json object with the same value of 'x'?
我不确定这是否可以实现。
我有一个 li
的列表,它们都有一个具有唯一值的自定义属性。我还有一个包含对象列表的 JSON 文件。每个对象都有一个具有相同值的特定字段
问题: 我正在尝试将 li
属性 'x' 与 JSON 中的值 'x' 匹配。如果该匹配正确,我想获取与 'x' 相同的对象内的所有字段,并将其放置在具有属性 'x'.
的 li
内
请帮忙,我不知道如何开始。我需要一些示例甚至一个 jsfiddle 示例。
JSON结构
[
{
"word": "hello",
"favnumber": "0070",
"item": "item1",
"color": "red"
},
{
"word": "hello world",
"favnumber": "0233070",
"item": "item2",
"color": "blue"
},
{
"word": "hello mom",
"favnumber": "0070",
"item": "item3",
"color": "pink"
},
{
"word": "hello dad",
"favnumber": "0070",
"item": "item4",
"color": "silver"
}
]
HTML结构
<div>
<li data-item="item1">1</li>
<li data-item="item2">2</li>
<li data-item="item3">3</li>
<li data-item="item4">4</li>
</div>
HTML 新结构
<div>
<li data-item="item1">hello , 0070, item1, red</li>
<li data-item="item2">hello world, 0233070, item2, blue</li>
<li data-item="item3">hello mom, 231213, item3, pink</li>
<li data-item="item4">hello dad, 007021312, item4, silver</li>
</div>
您可以将整个任务拆分为简单的子步骤:
- 查询 DOM 树以提取具有特定属性的元素(在您的例子中,
[data-item=*]
)。
- 对于每个元素,获取
data-item
属性的值。
- 遍历表示数组的 JSON 对象,以找到该数组中与上一步找到的 DOM 元素相对应的元素。
- 将 DOM 元素的子文本节点替换为任意值。
让我们来看看它。
查询 DOM 树以查找具有特定属性的元素
这是在 document.querySelectorAll
DOM API 的帮助下实现的。该方法将选择器作为其第一个参数,与您在 CSS:
中编写的内容非常相似
var items = document.querySelectorAll('[data-item]');
现在,在 items
变量中,您有 NodeList
个元素。第一步完成。
获取每个元素的属性值
这很简单,可以用类似
的东西来完成
var name = items[0].getAttribute('data-item');
现在 name
变量存储了一个表示 [data-item]
的属性值的字符串。
因为你有一个 NodeList
元素的数组,你必须遍历它:
for (var e in items) {
var element = items[e];
var name = element.getAttribute('data-item');
//...
}
根据元素的 属性 值查找数据数组中的元素
现在你必须把一个循环放到一个循环中,这样你才能找到一个与该元素一致的元素。
像这样:
for (var e in items) {
var element = items[e];
var name = element.getAttribute('data-item');
for (var i in data) {
var item = data[i];
// ...
}
}
此处,item
变量存储一个对象,它是初始 JSON 数组中的众多对象之一(在此特定示例中名为 data
)。
接下来,您必须检查 item
是否是您需要的。在你的情况下,
if (name == item.item) {
//...
}
因为 item
的 属性 item
存储的值必须与 DOM 元素的 [data-item]
属性的值一致。
现在,终于……
替换值
您可能需要更具体的任务,但此示例显示了一个简单的 element.innerText
替换。
让我们假设您在 if
语句中并且其条件评估为真。接下来,你想做一些像
var text = [];
text.push(item.word);
text.push(item.favnumber);
text.push(item.item);
text.push(item.color);
element.innerText = text.join(", ");
基本上就是这样。
您可以在 fiddle 中看到整个片段的工作原理:http://jsfiddle.net/3r4rmLth/
我不确定这是否可以实现。
我有一个 li
的列表,它们都有一个具有唯一值的自定义属性。我还有一个包含对象列表的 JSON 文件。每个对象都有一个具有相同值的特定字段
问题: 我正在尝试将 li
属性 'x' 与 JSON 中的值 'x' 匹配。如果该匹配正确,我想获取与 'x' 相同的对象内的所有字段,并将其放置在具有属性 'x'.
li
内
请帮忙,我不知道如何开始。我需要一些示例甚至一个 jsfiddle 示例。
JSON结构
[
{
"word": "hello",
"favnumber": "0070",
"item": "item1",
"color": "red"
},
{
"word": "hello world",
"favnumber": "0233070",
"item": "item2",
"color": "blue"
},
{
"word": "hello mom",
"favnumber": "0070",
"item": "item3",
"color": "pink"
},
{
"word": "hello dad",
"favnumber": "0070",
"item": "item4",
"color": "silver"
}
]
HTML结构
<div>
<li data-item="item1">1</li>
<li data-item="item2">2</li>
<li data-item="item3">3</li>
<li data-item="item4">4</li>
</div>
HTML 新结构
<div>
<li data-item="item1">hello , 0070, item1, red</li>
<li data-item="item2">hello world, 0233070, item2, blue</li>
<li data-item="item3">hello mom, 231213, item3, pink</li>
<li data-item="item4">hello dad, 007021312, item4, silver</li>
</div>
您可以将整个任务拆分为简单的子步骤:
- 查询 DOM 树以提取具有特定属性的元素(在您的例子中,
[data-item=*]
)。 - 对于每个元素,获取
data-item
属性的值。 - 遍历表示数组的 JSON 对象,以找到该数组中与上一步找到的 DOM 元素相对应的元素。
- 将 DOM 元素的子文本节点替换为任意值。
让我们来看看它。
查询 DOM 树以查找具有特定属性的元素
这是在 document.querySelectorAll
DOM API 的帮助下实现的。该方法将选择器作为其第一个参数,与您在 CSS:
var items = document.querySelectorAll('[data-item]');
现在,在 items
变量中,您有 NodeList
个元素。第一步完成。
获取每个元素的属性值
这很简单,可以用类似
的东西来完成var name = items[0].getAttribute('data-item');
现在 name
变量存储了一个表示 [data-item]
的属性值的字符串。
因为你有一个 NodeList
元素的数组,你必须遍历它:
for (var e in items) {
var element = items[e];
var name = element.getAttribute('data-item');
//...
}
根据元素的 属性 值查找数据数组中的元素
现在你必须把一个循环放到一个循环中,这样你才能找到一个与该元素一致的元素。
像这样:
for (var e in items) {
var element = items[e];
var name = element.getAttribute('data-item');
for (var i in data) {
var item = data[i];
// ...
}
}
此处,item
变量存储一个对象,它是初始 JSON 数组中的众多对象之一(在此特定示例中名为 data
)。
接下来,您必须检查 item
是否是您需要的。在你的情况下,
if (name == item.item) {
//...
}
因为 item
的 属性 item
存储的值必须与 DOM 元素的 [data-item]
属性的值一致。
现在,终于……
替换值
您可能需要更具体的任务,但此示例显示了一个简单的 element.innerText
替换。
让我们假设您在 if
语句中并且其条件评估为真。接下来,你想做一些像
var text = [];
text.push(item.word);
text.push(item.favnumber);
text.push(item.item);
text.push(item.color);
element.innerText = text.join(", ");
基本上就是这样。
您可以在 fiddle 中看到整个片段的工作原理:http://jsfiddle.net/3r4rmLth/