Question

我在页面上有动态div，它可以从一堆值中分配一个类。例如：

<div class='class1'><span class='spn1'>test</span></div>
<div class='class2'><span class='spn2'>test another</span></div>
<div class='class2'><span class='spn3'>test1</span></div>
<div class='class3'><span class='spn4'>test123</span></div>
<div class='class1'><span class='spn221'>test</span></div>

该类可以附加任意随机数。

现在在我的javascript中，我正在尝试基于div的类构建一个动态JSON对象，我想要的结构是：

{
    class1: {
        spn1: 'test',
        spn221: 'test'
    },
    class2: {
        spn2: 'test another',
        spn3: 'test123'
    },
    class3: {
        spn4: 'test223'
    }
}

我能够在平面数组结构中实现这一点，但我希望它以JSON格式实现，因为我将在其他函数的div类中执行ajax调用。我得到的平面阵列是（我不想要的）

[{class:class1,span:spn1,text:test},{class:class1,span:spn221,text:test},...]

链接到小提琴： https://jsfiddle.net/8v0uove3/

Answer 1

这是一种香草JS的做法：

// pick up the elements
var divs = document.querySelectorAll('div[class^="class"]');

// use reduce with an initial object
var obj = [].slice.call(divs).reduce(function (p, c) {
  var child = c.firstChild;
  var key = c.getAttribute('class');

  // if the class key doesn't exist in the initial object add it
  if (!p[key]) p[key] = {};

  // add the new span properties to the object
  p[key][child.getAttribute('class')] = child.textContent;
  return p;
}, {});

输出

{
  "class1": {
    "spn1": "test",
    "spn221": "test"
  },
  "class2": {
    "spn2": "test another",
    "spn3": "test1"
  },
  "class3": {
    "spn4": "test123"
  }
}

DEMO

Answer 2

这是完整的function。这是一个Pure JavaScript解决方案。请看下面的代码。

<强>功能

function convertHtmlToJson() {
  var
    output = {},
    divRef = document.querySelectorAll('div[class^="class"]'),
    divElem = undefined;

  for (var i = 0; i < divRef.length; i++) {
    divElem = divRef[i].getAttribute('class');

    // Check if key exists or not
    if (!output[divElem]) {  // output[divElem] === undefined
      output[divElem] = {}
    }

    // Get child element
    childRef = divRef[i].firstElementChild || divRef.firstChild;

    var className = document.getElementsByClassName(childRef.getAttribute('class'));
    for (var j = 0; j < className.length; j++) {
      output[divElem][className[j].getAttribute('class')] = className[j].textContent;
    }
  }
  return output;
}

函数调用

// Final JSON
var finalJson = convertHtmlToJson();

// Desired JSON output
console.log(JSON.stringify(finalJson));

您可以在浏览器控制台中查看所需的JSON输出。

希望它有所帮助！

Answer 3

我设法找到了解决方案，这是您想要的结果吗？（看一下控制台输出）

var obj = {};
$('div').each(function() {
  // Get children
  var children = $(this).children();
  // Get current class
  var current = $(this).attr('class');
  // Check if current class already exists in the class object
  // If not create an empty object
  if (typeof obj[current] === 'undefined') {
    obj[current] = {};
  }
  // Iterate over div's children
  $(children).each(function() {
    // Get class value of child element
    var childCls = $(this).attr('class');
    // Set the value for child object
    obj[current][childCls] = $(this).text();
  })
});
console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'><span class='spn1'>test</span>  <span class='spn3'>test</span> 
</div>
<div class='class2'><span class='spn2'>test another</span>
</div>
<div class='class2'><span class='spn3'>test1</span>
</div>
<div class='class3'><span class='spn4'>test123</span>
</div>
<div class='class1'><span class='spn221'>test</span>
</div>

动态嵌套JSON对象

3 个答案: