從給定數據生成一個 json 對象

Question

我很難從下面的數據中生成以下格式的 json 對象。 小提琴

[ { Invoice: 
    { 
       headers: { date: "15-01-2020", buyer: "McDonalds", order: "145632"}, 
       items: { name: "Big Mac",   quantity: "5",  rate: "20.00"}, 
       items: { name: "Small Mac", quantity: "10", rate: "10.00"} 
    } 
  } 
, { Invoice: { // Other invoices go here, I've used just one for this example} } 
] 

<div class="invoice">
  <div class="header">
    <div contenteditable data="date">15-Jan-2020</div>
    <div contenteditable  data="buyer">McDonalds</div>
    <div contenteditable  data="order">145632</div>
  </div>
  <div class="item">
    <div contenteditable data="name">Big Mac</div>
    <div contenteditable data="quantity">5</div>
    <div contenteditable data="rate">20.00</div>
  </div>
  <div class="item">
    <div contenteditable data="name">Small Mac</div>
    <div contenteditable data="quantity">10</div>
    <div contenteditable data="rate">10.00</div>
  </div>
</div>

<button>Loop</button>

jQuery

var button = $("button")
button.on("click",function() {  
  jsonObj =[];
  $('.invoice>.header>div, .invoice>.item>div').each(function(index,item) {
    console.log($(this).parent().attr('class'));
    console.log($(this).attr('data'),$(this).text());
    q = {}
    q ['header'] = $(this).parent().attr('class');
    q [$(this).attr('data')] = $(this).text();

    jsonObj.push(q);
   });
   console.log(jsonObj);
   console.log(JSON.stringify(jsonObj));
});

我目前最終得到一個像這樣的對象，其中的鍵到處重復。 我怎樣才能做到這一點？

  [ { "header": "header", "date": "15-Jan-2020"} 
  , { "header": "header", "buyer": "McDonalds"} 
  , { "header": "header", "order": "145632"} 
  , { "header": "item", "name": "Big Mac"} 
  , { "header": "item", "quantity": "5"} 
  , { "header": "item", "rate": "20.00"} 
  , { "header": "item", "name": "Small Mac"} 
  , { "header": "item", "quantity": "10"} 
  , { "header": "item", "rate": "10.00"} 
  ] 

Answer 1

在您的示例中，您有一個具有兩個相同鍵的對象：

"items":{
    "name":"Big Mac",
    "quantity":"5",
    "rate":"20.00"
}
"items":{
    "name":"Small Mac",
    "quantity":"10",
    "rate":"10.00"
}

這行不通，因為您只能擁有一個，因此您需要將items鍵的值更改為一組對象：

"items":[
    {
        "name":"Big Mac",
        "quantity":"5",
        "rate":"20.00"
    },
    {
        "name":"Small Mac",
        "quantity":"10",
        "rate":"10.00"
    }
]

迭代代碼可能如下所示：

const jsonObj = [];

$('.invoice').each((index, item) => {
 const invoice = {
    header: {},
    items: []
 };

 $(item).find('.header > div').each((index, item) => {
    const key = $(item).attr('data');
    invoice.header[key] = $(item).text();
 });

 $(item).find('.item').each((index, item) => {
    const itemObj = {};

    $(item).find('div').each((index, item) => {
        const key = $(item).attr('data');
        itemObj[key] = $(item).text();
    });

    invoice.items.push(itemObj);
 });

 jsonObj.push({
    Invoice: invoice
 });
});

與您的版本的主要區別在於它逐步遍歷 dom。 首先，通過每張發票，然后通過發票的每個標題和每個項目。 這樣很容易構建所需的結構。

這是 jsfiddle 鏈接： https ://jsfiddle.net/tara5/tanb174h/

Answer 2

純JS代碼：

備注：我改了：
<div ... data="..."> ... </div>
到
<div ... data-ref="..."> ... </div>

符合 HTML 指令（參見https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data- * ）

 const jsonObj = [] , inVoices = document.querySelector('.invoice') , subDivOf = (parent,query) => [...parent.querySelectorAll(query)] , dataElms = (ac,el)=>{ac[el.dataset.ref]=el.textContent;return ac } ; Loop.onclick=_=> { jsonObj.push( { Invoice: getInVoicesValues() } ) console.clear() console.log( jsonObj ) } function getInVoicesValues() { const headers = subDivOf(inVoices,'.header>div').reduce(dataElms,{}) , items = subDivOf(inVoices,'.item').reduce((accI,itm)=> { accI.push( subDivOf(itm, 'div').reduce(dataElms,{})) return accI },[]) ; return { headers, items } }

 .as-console-wrapper { max-height: 100% !important; width: 70% !important; top: 0; left: 30% !important; } div.invoice>div:before { display: block; content: attr(class) ' :'; } div[contenteditable] { font: 12px Arial, Helvetica, sans-serif; margin: .3em; width: 12em; border : 1px solid grey; padding:.2em 1em; margin-left:6em; } div[contenteditable]::before { display: inline-block; content: attr(data-ref); font-weight : bold; width: 4.9em; margin-left:-5.3em; }

 <div class="invoice"> <div class="header"> <div contenteditable data-ref="date">15-Jan-2020</div> <div contenteditable data-ref="buyer">McDonalds</div> <div contenteditable data-ref="order">145632</div> </div> <div class="item"> <div contenteditable data-ref="name">Big Mac</div> <div contenteditable data-ref="quantity">5</div> <div contenteditable data-ref="rate">20.00</div> </div> <div class="item"> <div contenteditable data-ref="name">Small Mac</div> <div contenteditable data-ref="quantity">10</div> <div contenteditable data-ref="rate">10.00</div> </div> </div> <button id="Loop">Loop</button>

.........................全屏運行片段以獲得更好的查看效果

第二種方法

 const jsonObj = []; const inVoicesElms = document.querySelectorAll('.invoice div'); Loop.onclick=_=> { jsonObj.push( { Invoice: getInVoicesValues() } ) console.clear() console.log( jsonObj ) } function getInVoicesValues() { let rep = { headers:{}, items:[] } , cur = null ; inVoicesElms.forEach(el => { if (el.matches('.header')) { cur = rep.headers } else if (el.matches('.item')) { cur = {} rep.items.push(cur) } else // (el.matches('[contenteditable]')) { cur[el.getAttribute('data')] = el.textContent } }) return rep }

 .as-console-wrapper { max-height: 100% !important; width: 70% !important; top: 0; left: 30% !important; }

 <div class="invoice"> <div class="header"> <div contenteditable data="date">15-Jan-2020</div> <div contenteditable data="buyer">McDonalds</div> <div contenteditable data="order">145632</div> </div> <div class="item"> <div contenteditable data="name">Big Mac</div> <div contenteditable data="quantity">5</div> <div contenteditable data="rate">20.00</div> </div> <div class="item"> <div contenteditable data="name">Small Mac</div> <div contenteditable data="quantity">10</div> <div contenteditable data="rate">10.00</div> </div> </div> <button id="Loop">Loop</button>