js 中从JSON中取出某个属性的值

最新推荐文章于 2024-08-28 11:37:10 发布

不一样的烟火@

最新推荐文章于 2024-08-28 11:37:10 发布

阅读量8.2k

点赞数 2

分类专栏： js 文章标签： javascript json

本文链接：https://blog.csdn.net/wzgbgz/article/details/125536886

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用JavaScript处理JSON对象，包括通过eval、遍历和直接访问方式获取属性值。此外，还演示了如何在HTML中利用JSON数据进行内容渲染，特别是在表格组件中的应用，例如使用特定键值对映射显示不同的状态标签。

摘要由CSDN通过智能技术生成

<script type="text/javascript"> 
 getJson('age'); 
function getJson(key){ 
 var jsonObj={"name":"傅红雪","age":"24","profession":"刺客"}; 

 //1、使⽤eval⽅法
 var eValue=eval('jsonObj.'+key); 
 alert(eValue); 


 //2、遍历Json串获取其属性
 for(var item in jsonObj){ 
  if(item==key){ //item 表⽰Json串中的属性，如'name' 
   var jValue=jsonObj[item];//key所对应的value 
   alert(jValue); 
  } 
 } 


 //3、直接获取
 alert(jsonObj[''+key+'']); 
} 




<script>
   let aa =  {
        '1': 'primary',
        '2': 'warning',
        '3': 'success',
        '4': 'danger',
    }[1];


   let person =  {
       'name': 'primary',
       'age': 'warning',
       '3': 'success'
    }['age'];
    document.getElementById("bb").innerHTML = person
</script>

</script>

使用示例：

<el-table-column
    label="状态"
    width="96"
    show-overflow-tooltip
    align="center"
    class-name="state-col"
>
    <template slot-scope="scope">
        <el-tag
            :type="({
                '1': 'primary',
                '2': 'warning',
                '3': 'success',
                '4': 'danger',
            })[scope.row.state]"
        >
            {{ ({
                '1': '未开始',
                '2': '进行中',
                '3': '已完成',
                '4': '创建失败'
            })[scope.row.state] }}
        </el-tag>
    </template>
</el-table-column>