2017-10-01 58 views
-1

嗨,大家需要一点帮助,因为我是一个开始在JavaScript请注意,我的问题可能是一个复制给你所有,但我需要在这里一点点启发,无论如何,我需要得到显示我从一个JSON阵列所需的数据可以说我有3阵列使用javascript从json数组中检索特定的数据

var = countrysites[ "Denmark"],["United States"],["France"] 

,如果我使用基本的JavaScript的onclick它会显示丹麦唯一没有要求美国和法国的所有数据资料点击丹麦的标志。这里是我的javascript代码

function displayData(){ 
for (var i = 0; i < countrysites.length; i++) { 
    if (countrysites[i].country_name === id) { 
     countrysites[i].country_name = country_name; 

    } 
    } 
}  

和我的div有“sitemark”的ID和具有的onclick displayData

预先感谢您

+0

请编辑您的问题以正确显示您的数据结构。您的代码似乎使用的是一组对象,而不是JSON([JSON是一种文本格式](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/) )),所显示的代码似乎在修改数据,而不是显示任何内容。这将有助于在上下文中显示代码 - 从使用'return'看来它是一个函数,所以显示函数以及如何调用它。 – nnnnnn

+0

请分享json reponse – brk

+0

@nnnnnn你去我已编辑我的代码 – Kyle

回答

-1

如果你要通过多地去维数组你必须使用两个for循环,像这样

for(var i = 0; i < arr.length; i++) { 
for(var j = 0; j < arr[i].length; j++) { 
    if(whatever you're looking for) { 

    } 
} 

}

+0

实际上我用于循环,但结果将是相同的,它会显示其他国家的名称以及一次点击 – Kyle

-1

我在回答这个问题时采取了一些自由度,因为我仍然不确定你的数据结构是什么样子,但希望这会有所帮助。

以下是您接收到的数据作为JSON,然后解析。它是包含country_nameinfo属性的对象数组。

const countryInfo = [ 
    { country_name: 'Denmark', info: 'This is Denmark' }, 
    { country_name: 'England', info: 'This is England' }, 
    { country_name: 'Japan', info: 'This is Japan' } 
]; 

有关此DEMO目的,我们抢body元素,然后抢只是从数据的国名的数组。

const body = document.querySelector('body'); 
const names = countryInfo.map(obj => obj.country_name); 

我们建立一些标志物与阵列中的数据,并将它们添加到body元素。请注意数据属性data-name。我们在这里存储国名的副本。

names.forEach(name => { 
    const html = `<div class="sitemark" data-name="${name}">${name}</div>`; 
    body.insertAdjacentHTML('beforeend', html); 
}); 

我们抓住info元素。这是我们添加国家信息的地方。

const info = document.querySelector('#info'); 

我们抓住标记并向它们添加事件监听器。点击时,请拨打displayData功能。

const sitemarks = document.querySelectorAll('.sitemark'); 
sitemarks.forEach(marker => { 
    marker.addEventListener('click', displayData, false); 
}); 

要得到我们的countryInfo阵列拉出的第一个对象实例,其中国家名称相同的元素上的data-name属性名称上进行find操作countryinfo,然后取info来自该对象的值。然后我们将该文本添加到info元素。

function displayData() { 
    const text = countryInfo.find(obj => obj.country_name === this.dataset.name).info; 
    info.innerHTML = text; 
}