Javascript 将JSON值组合成一个文本

我使用这个javascript在HTML上显示6小时内的预测雪的值。HTML上的文本显示。。。0.25,0.25,0.25,0.35,0.20,0.25而不是1.55。JSON结果返回了6个不同的预测降雪量值，我需要将所有值相加到一个要显示的值中

JSON的响应如下所示

{"success":true,"error":null,"response":[{"periods":[{"snowIN":0.25},{"snowIN":0.25},{"snowIN":0.25},{"snowIN":0.35},{"snowIN":0.20},{"snowIN":0.25}]}]}  

JS:

---

您没有将这些值相加

您可以保留一个var来存储范围外的值并添加到其中，然后只添加该元素

const request = aeris.api().endpoint('forecasts').place('pierre,sd').filter('1hr').limit('48');
var valueToAddToTML = 0;

request.get().then((result) => {
    const data = result.data;
    const { periods } = data[0];
    if (periods) {
        periods.reverse().forEach(period => {
            const snowIN = period.snowIN || '0.00';
            valueToAddToTML += snowIN;

        });
        // Add to HTML
        const html = (`<p class="map-datavalue">${valueToAddToTML}"</p>`);
        target.insertAdjacentHTML('afterbegin', html);
    }
}); 

---

您可以使用以下公式计算周期总数：

const target=document.getElementById'data-reading'； const result={success:true，error:null，response:[{periods:[{snowIN:0.25}，{snowIN:0.25}，{snowIN:0.25}，{snowIN:0.35}，{snowIN:0.20}，{snowIN:0.25}]} const data=result.response； 常数{periods}=数据[0]； 如果周期{ const total=periods.reducesum，{snowIN}=>sum+snowIN，0； 常量html=`

${total | | 0.00'}

`； insertAdjacentHTML'afterbegin'，html； } .map数据值{ 字体系列：Arial，无衬线； 字体大小：20px； 颜色：FFFFFF； 字号：700； 文本阴影：-2PX000000，02PX000000，2PX000000，0-2PX000000； z指数：6； }

---

要计算snowIn的总和，只需使用，它将为您提供一个线性解决方案，如sum中所述

---

在添加到html之前，您可以将所有snowIN合并为一个值

设obj={success:true，error:null，response:[{periods:[{snowIN:0.25}，{snowIN:0.25}，{snowIN:0.25}，{snowIN:0.35}，{snowIN:0.20}，{snowIN:0.25}]} 设op=obj.response[0]。periods.reduceout，{snowIN}=>out+snowIN，0 document.getElementById'text'.innerHTML=op //console.logop 文本{颜色：绿色；宽度：100px；高度：100px；}

---

在哪里添加值？您的for循环正在为每个值添加一个新的html元素。在html上，希望javascript添加从JSON获得的值。Fancier answer ftwI无法编辑API订阅的JSON。您也不需要编辑它，只需使用它来计算总和，如reduce所示，我在html中更新了代码if句点。Array.reduce有问题。您有什么问题？517952134这不起作用。这是我放在html中的js代码。window.onload=>{const target=document.getElementById'data-reading'；const request=aeris.api.endpoint'forecast'.place'pierre，sd'。filter'1hr'。limit'48'；var valueToAddToTML=0；request.get.thenresult=>{const data=result.data；const{periods}=data[0]；if periods{periods.reverse.forEachperiod=>{const snowIN=period.snowIN | |'0.00'；valueToAddToTML+=snowIN；}；

const request = aeris.api().endpoint('forecasts').place('pierre,sd').filter('1hr').limit('48');
var valueToAddToTML = 0;

request.get().then((result) => {
    const data = result.data;
    const { periods } = data[0];
    if (periods) {
        periods.reverse().forEach(period => {
            const snowIN = period.snowIN || '0.00';
            valueToAddToTML += snowIN;

        });
        // Add to HTML
        const html = (`<p class="map-datavalue">${valueToAddToTML}"</p>`);
        target.insertAdjacentHTML('afterbegin', html);
    }
}); 

const result = {"success":true,"error":null,"response":[{"periods":[{"snowIN":0.25},{"snowIN":0.25},{"snowIN":0.25},{"snowIN":0.35},{"snowIN":0.20},{"snowIN":0.25}]}]}  

const sum = res['response'][0]['periods'].reduce((a, b) =>a + b['snowIN'], 0);

console.log(sum)