js如何創建JSON對象

一、總結

一句話總結：直接創建js數組和js對象即可，然后JSON.stringify就可以獲取json字符串，js中的一切都是對象，而且js中的對象都是json對象

js 一切 對象 json對象

我們可以在JavaScript 中使用 JSON，首先創建一個JavaScript 變量，然后將 JSON 格式的數據字符串直接賦值給它，現在我們來看看使用 JavaScript 創建 JSON 對象的各種方式：

1. 創建一個空對象
   var jsonObj = {};

2. 創建一個新對象
   var jsonObj = new Object();

3. 創建一個非空對象
   var jsonObj = {“FirstName”: “xu”,”LastName”,”Xiang”};

4. 創建一個空數組
   var Array = [];

//可以利用push方法向數組添加成員， var students = []; students.push("1234"); students.push("2345");

 

1、json的本質是是什么？

字符串

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成, JSON采用完全獨立於語言的文本格式，這些特性使JSON成為理想的數據交換語言。

 

2、json中的冒號(:)的作用是什么？

對象 鍵值

數組 鍵值

json數組中的鍵值之間

json對象的名字和值之間（函數名和函數體，屬性名和屬性值）

 

3、如何修改json對象的屬性？

數組 對象 直接 賦值 json對象

直接用js中的數組和對象給json對象賦值即可

option_old['legend']['data']=option_data_selected['legend_data'];

前面是json對象，后面是js數組

    //三、將數據給echart
    // 指定圖表的配置項和資料
    var option_old = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            x:'center',
            y:'top',
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            y:'bottom',
            data:['第一組','第二組','第三組','第四組']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '高度 (mm)',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name:'第一組',
                type:'line',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name:'第二組',
                type:'line',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name:'第三組',
                type:'line',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 72.7, 185.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            }
        ]
    };
    option_old=fry_analyze_record_echart_editData(option_old,option_data_selected);
    //console.log(option_old);
    //console.log(option_old['legend']['data']);


    //四、對echar進行動態刷新
    var ar_table_id_echart='my_bar_table_'+ar_table_id;
    var myChart = echarts.init(document.getElementById(ar_table_id_echart));
    myChart.clear(); //清空畫布
    myChart.hideLoading(); //加載動畫效果
    myChart.setOption(option_old); //設置配置項和數據

    //動態修改echart的數據
    function fry_analyze_record_echart_editData(option_old,option_data_selected){
        //賦值操作
        if(option_data_selected){
            option_old['legend']['data']=option_data_selected['legend_data'];
            //option_old['xAxis'][0]['data']=option_data_selected['xAxis_data'];
            option_old.xAxis[0]['data']=option_data_selected['xAxis_data'];
            option_old['yAxis'][0]['name']=option_data_selected['yAxis_data']['name'];
            option_old['yAxis'][0]['max']=option_data_selected['yAxis_data']['max'];
            option_old['yAxis'][0]['min']=option_data_selected['yAxis_data']['min'];
            option_old['yAxis'][0]['interval']=option_data_selected['yAxis_data']['interval'];
            //series
            var new_series=new Array();
            for(var x1 in option_data_selected['series_data']){
                var new_series_per_obj=new Object();
                new_series_per_obj.name=x1;
                new_series_per_obj.type='line';
                new_series_per_obj.data=option_data_selected['series_data'][x1];
                new_series.push(new_series_per_obj);
            }
            option_old['series']=new_series;
        }else{
            option_old['series']=null;
        }

        return option_old;
    }

 

 

 

二、JavaScript創建JSON對象

參考：JavaScript創建JSON對象 - Keep Moving~ - CSDN博客
https://blog.csdn.net/c_base_jin/article/details/71346503

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成, JSON采用完全獨立於語言的文本格式，這些特性使JSON成為理想的數據交換語言。

JSON 語法

• 數據使用鍵名/值對表示，鍵名是字符串，值沒有限定；
  例如 “language”:”Java”
• 每個數據之間由逗號分隔；
• 使用大括號保存對象，對象可以包含若干個數據；
• 使用方括號保存數組，數組值使用“,”分割；

JSON數據使用’”鍵名”：”值”’的形式，其中鍵名要求是字符串，而值 可以是以下任意類型：
1. 數值（整數，浮點數）
2. 字符串（在雙引號中）
3. 邏輯值（true/false）
4. 數組（在方括號中）
5. 對象（在花括號中）

JSON支持兩種數據結構

1. 名/值對集合：可以是關聯數組，記錄，字典等
2. 有序的值列表：包括數組，列表，序列等。

簡單例子

1.JSON值是字符串
{ "firstName":"John" , "lastName":"Doe" }

2.JSON值是數組

{
    "employees": 
    [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }

使用JavaScript創建JSON對象

我們可以在JavaScript 中使用 JSON，首先創建一個JavaScript 變量，然后將 JSON 格式的數據字符串直接賦值給它，現在我們來看看使用 JavaScript 創建 JSON 對象的各種方式：

1. 創建一個空對象
   var jsonObj = {};

2. 創建一個新對象
   var jsonObj = new Object();

3. 創建一個非空對象
   var jsonObj = {“FirstName”: “xu”,”LastName”,”Xiang”};

4. 創建一個空數組
   var Array = [];

//可以利用push方法向數組添加成員，
var students = [];
students.push("1234");
students.push("2345");

1. 創建一個非空數組

var students =  
[
    { "firstName":"John" , "lastName":"Doe" }, 
    { "firstName":"Anna" , "lastName":"Smith" }, 
    { "firstName":"Peter" , "lastName":"Jones" }
];

可以看出students 變量包含有三個JSON對象的數組，其成員如下圖：